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!

Best Answer
photo

Check out this tutorial to learn how to create an autocomplete search.

Comments (14)

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

photo
1

Check out this tutorial to learn how to create an autocomplete search.

photo
1

I've tried following this tutorial, however, when trying to recreate the events and following the steps exactly, step 5 doesn't display as shown and doesn't work.

Step 5: Below, select “Calculate” and click on the “Add Expression” link. Build the expression displayed in the image below, adding (in this sequence) the “Filter” function, the Data Master (from the Data Master tab), the “Sort Name” Attribute (from the Data Master tab), the “Has” function and the Input Text Field:


/A3ceJKbh0DyKAAAAAElFTkSuQmCC

Are there better tutorials on how to work with events once you purchase? I'm hesitant to buy/subscribe to this software with the apparent lack of information on how to use this portion of the software.

Also, is there no way to view where you Build the expression once it's been created? The only way I can get building the expression to show up again is to delete and start over.

photo
1

All tutorials can be found at justinmind.com/support . We're always working on improving our tutorials, so your feedback is helpful.

You might find it useful to download the example file at the bottom of the tutorial you're referring to, and compare the events to your own file to see what's different.

Can you clarify what you're referring to by 'build the expression'? Do you mean the dialog that pops up when you click 'add expression' for the 'Calculated' "Set Value" action?

photo
1

Hello,

Thanks for the response.

I have downloaded the example, but it is very difficult to tell what is going on (how to build an expression) without being able to see how the expression is formatted, hence why I asked if there is a way to view where you build the expression after it's been created.

"build the expression" is the word for word verbiage your tutorial uses when trying to walk a user through step 5 of setting up the formula/expression in your tutorial. I assumed it was referring to this:

/kauW3kmajvDlclfEEAcYkkfskxZM+1FqU8fSonG6v+v8f9vZthRlbIiYAAAAASUVORK5CYII=

When trying to build something similar by following the tutorial directions it does not work or look the same:

/wNRu7My+8zGLAAAAABJRU5ErkJggg==

photo
1

It's very important that the expression looks exactly the same. The HAS must be next to the attribute and within its own brackets with the attribute, like our example screenshot.

photo
1

Hello,

I understand that...

That is why I am asking how to get it to match (as stated " it does not work or look the same"). I followed the directions exactly - adding each element in the order described. What my screenshot shows is what you get when following your tutorials directions.

How can I move the elements around? I've tried dragging and dropping, right clicking, but nothing allows me to rearrange them and they always fall in that order.

Also, is there anything that explains how to work with these expressions? The documentation on your site only describes the functionality. It does not walk a user through the logic of how to use the different elements in the expression builder.

photo
1

Apologies for any confusion! I'll try to clarify:

Think of the position of functions and elements in the expression builder like a mathematical expression. If elements are within their own brackets, they relate to each other.


Try to drag a function right below an attribute to have it apply to that attribute and be contained within its brackets. See this video. You can hold and drag a function to move it.

You might also find this video helpful in explaining how the expression builder works.

photo
photo
1

In this example the user can search through a predefined data list but they can't select anything from that list.

Is there a way to allow the user to actually select anything from the list via the keyboard or mouse?

For example, when the user types in a specific name the list narrows down to names that match. Is there a way for the user to use the arrow down button on the keyboard and then select the name they want by hitting enter on the keyboard?

photo
1

I'm not sure about selecting data through the keyboard, but it's definitely possible through clicking. Check out the attached prototype.

photo