How to implement a faux-autocomplete on search?

Eric shared this question 3 years ago
Answered

I'm trying to stimulate autocomplete on my website search. For example, I want to be able to type 'sport' and have the search bar suggest values that include 'sport'.


I just want to demonstrate this search function once, so I could just hardcode it and it doesn't have to be actually functional.


I want to be able to type 'sports' into the search box and have the values 'basketball', 'baseball', and 'soccer' (which I entered manually while creating the prototype) automatically appear underneath the search box.


If I were to type something else than 'sport', nothing would happen since I have only anticipated for the user typing sport, if I'm making sense.


How do I do this? Thanks!

Comments (5)

photo
1

Hello Eric,


I believe you may find the following tutorial useful in implementing an autocomplete search:


http://www.justinmind.com/support/pre...


As for having sports show different types (basketball, etc), you will need to define another filter on the data master to show only entries that correspond to that value. Therefore, when designing the data master, you can elect to have a field that specifies type. In that way, you can have a simple filter that shows only entries that have sport listed as the field 'type'.


Best,


Luisa

photo
1

Hi Luisa,


Would it be possible to 'hide' the data master/ set? Have a way in which the results only show up only after I typed something? Or change the appearance of the scrollbar?


Thanks!


Eric

photo
1

Hello Eric,


You can indeed do so. You simply need to select the data grid and check the hide component checkbox in the properties panel. That way, it will not show by default when the page loads. Then, you can specify an on change event type on the search box with the action show for the data grid. If you'd like to change the appearance of the scrollbar, you can create a custom one by following these directions:


http://www.justinmind.com/support/cus...


Best,


Luisa

photo
1

Hi Luisa,


Thanks for your help over the past few days, I really appreciate it.


Is there a way for me to change the alternative white/grey rows of the data grid to just all white?


Thanks!


Eric

photo
1

Hello Eric,


To do so, you may select the data grid and change its even and odd color options in the properties panel.


Best,


Luisa