Response title
This is preview!
how to hide results after selecting from listview filterable / autocomplete
in jQuery Mobile
•
7 years ago
Something that has troubled me for some time - I solved it just now and
thought I would share...
Using listview autocomplete
http://demos.jquerymobile.com/1.4.5/listview-autocomplete/
I have a form for entering a business name and address. When the operator (user) enters a business name, I want it to list similar names already on file. Purpose: Give the operator the chance to either edit an existing record, or give them an idea the record already exists, or allow them to add a new record that is similar to an existing record.
What worked was incomplete solution... Enter a business name and existing similar named businesses were suggested as list items. Operator could select one and the form correctly populated.
Problem 1: After the operator selected an existing business/list item, and the form was populated, the suggested list items stayed visible.
I tried various solutions, like dynamically hiding the list items after form was populated etc but each solution came with some ugliness.
Problem 2: I could only edit/select one address. Attempting to repeat the process on a second record meant I was offered no suggested list items.
After some head scratching I found reference at the bottom of this page: http://demos.jquerymobile.com/1.4.5/filterable/
The solution that worked for me:
Adding
Does this make sense? I hope it helps someone going forward...
Using listview autocomplete
http://demos.jquerymobile.com/1.4.5/listview-autocomplete/
I have a form for entering a business name and address. When the operator (user) enters a business name, I want it to list similar names already on file. Purpose: Give the operator the chance to either edit an existing record, or give them an idea the record already exists, or allow them to add a new record that is similar to an existing record.
What worked was incomplete solution... Enter a business name and existing similar named businesses were suggested as list items. Operator could select one and the form correctly populated.
Problem 1: After the operator selected an existing business/list item, and the form was populated, the suggested list items stayed visible.
I tried various solutions, like dynamically hiding the list items after form was populated etc but each solution came with some ugliness.
Problem 2: I could only edit/select one address. Attempting to repeat the process on a second record meant I was offered no suggested list items.
After some head scratching I found reference at the bottom of this page: http://demos.jquerymobile.com/1.4.5/filterable/
The filterable widget runs the filter a single time during startup to make sure the list of children reflects the value entered in the search input. You can avoid this step by specifying thedata-enhanced="true"attribute. When set to true, the filterable will assume that you have correctly applied the classui-screen-hiddento those children that should be initially hidden.
The solution that worked for me:
Adding
data-enhanced="true"
did nothing for me so perhaps I mis-read it as a potential solution.
However... after operator selects an item from the list view, I add
"ui-screen-hidden" to all items and they hide. If I enter a
new business name in the search box, it correctly offers me suggestions.Does this make sense? I hope it helps someone going forward...
2
