如何用axure做搜索功能交互的下拉框

Sponsor

要在Axure中設計一個搜索功能的下拉框，您可以按照以下步驟進行操作：

演示效果：

將要實現的功能

• 當輸入框的文本發生變化時，下拉列表顯示搜索的內容
• 當點擊下拉列表中的項目時，輸入框顯示該項目文本
• 當輸入下拉框值包含的字符時，自動篩選出對應的內容

如何實現這些功能

• 當輸入框的文本發生變化時，在下拉列表中添加一個過濾器來過濾輸入框中的文本。
• 當設置下拉列表的項目被點擊時，輸入框顯示下拉列表的項目文本。

制作過程

第一步：Widgets設置

• 將一個單行輸入框拖入畫布，并命名為 “First Name”。
• 將一個中繼器拖入畫布，然后添加一個新的行數據。

創建一個動態面板，包括中繼器，并且將動態面板命名為Search Panel。

第二步：設置交互

添加過濾器。選擇文本字段，添加[when TEXT CHANGED]的交互，添加[Add Filter]的新動作，并設置中繼器規則：[First_Name] [contains] [Text on widget] [First Name]。

添加GOT FOCUS動作。設置動態面板的選擇狀態。

• 雙擊中繼器，選擇矩形，并添加[Click OR TAP]，將矩形的文本分配給搜索文本字段，隱藏搜索面板，同時取消選擇。
• 默認隱藏搜索面板，并且設置搜索框的選定樣式。

作者：小斐實戰

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。