Upvote 2

How to implement a faux-autocomplete on search?

Answered Victor Conesa ● ago

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

Danielle Schneider ●

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

Replies (7)

Enrique Cano ●

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

Enrique Cano ●

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

Enrique Cano ●

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

Enrique Cano ●

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

Enrique Cano ●

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

Danielle Schneider ● ●

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

Cynthia Cooper1 ●

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.

Danielle Schneider ●

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?

Cynthia Cooper1 ●

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:

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

/wNRu7My+8zGLAAAAABJRU5ErkJggg==

Danielle Schneider ●

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.

Cynthia Cooper1 ●

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.

Danielle Schneider ●

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.

Cynthia Cooper1 ●

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?

Danielle Schneider ●

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

Files:

Ron Glezer ●

Hey Danielle,

I tried to understand how the file you attached works but I didn't find any events there apart from the first set value event that allows the autocomplete. Can you please explain?

I would like to be able to click on one of the options on the list.Then, clicking one of the options should make the selection appear in the text field (not a new text field under it) and the data list should disappear - so that the user can continue filling the other fields in the screen.

Can it be done?

Please help!

Danielle Schneider ●

There are three events. First, as you noted, the autocomplete event. Then, select 'current_row_1' in the Data List and you'll see two other events. They populate the text fields below with the selected (clicked) value.

As for your other question, yes that's definitely possible. We created an 'on click' + 'set value' event for current_row_1, selecting the text field as the target of the action. Then, for the value, click 'calculated'. In the Calculated Expression builder, drag the first input from the Data List into the open space, followed by the 'concat' function. Type ',' into the space that appears. Drag the 'concat' function next to that, and then drag the second input from the Data List into the next space. Then, create another action - 'on click' + 'hide' and hide the Data List.

Files:

Ron Glezer ●

Success! Thank you so much