Axure Baidu Fuzzy Query Function

The effect achieved in this article is similar to the fuzzy query function of many websites such as Baidu, as shown in Figure

1. Establish Axure, this article takes Baidu as an example for easy understanding.

2. Insert a single-line text box, the length is set according to your own needs, and a button is inserted behind the text box.

 

3. Create a dynamic panel under the text box, name it "Search List", click state1 of the dynamic panel, edit state1, drag the rectangle into state1, add content to the rectangle, and then set the border of the rectangle to none. This article takes the word "天" as an example.

 

4. Start to set the action interaction, click the text box, and display the dynamic panel when "day" is entered in the text box. Hide the dynamic panel when entering non-days in the textbox.



5. Edit the state1 state of the dynamic panel, select "Weather Forecast" and add a click event to it. For example, when you click "Weather Forecast", the search list is automatically hidden, and the text box displays "Weather Forecast".


7. Edit the state1 state of the dynamic panel and edit other options separately

 

8. Go back to the [Baidu] page and press F5 to preview the prototype


 

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=326835764&siteId=291194637