I have an Autocomplete search that works well in general. The one thing I notice is that as one types, the Search input text is automatically selected. I’m not sure it this is related to the autocomplete settings or an iOS thing. Makes selecting the correct input a bit glitchy. Obviously, if it’s iOS, I can’t do anything about it.
My code:
var autocompleteSearchDrugs = app.autocomplete.create({
inputEl: '#searchbar-drugs input[type="search"]',
openIn: 'dropdown',
requestSourceOnOpen: true,
closeOnSelect: true,
preloader: true, //enable preloader
/* If we set valueProperty to "id" then input value on select will be set according to this property */
valueProperty: 'name', //object's "value" property name
textProperty: 'name', //object's "text" property name
limit: 20, //limit to 20 results
typeahead: true,
expandInput: true,
//dropdownPlaceholderText: 'Search Drugs',
source: function(query, render) {
var autocomplete = this;
var results = [];
if (query.length === 0) {
render(results);
return;
}
// Show Preloader
autocomplete.preloaderShow();
// Do Ajax request to Autocomplete data
app.request({
url: 'drugsearch.min.json',
method: 'GET',
dataType: 'json',
//send "query" to server. Useful in case you generate response dynamically
data: {
query: query,
},
success: function(data) {
// Find matched items
for (var i = 0; i < data.length; i++) {
if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) === 0) results.push(data[i]);
}
dynamicSheet.open();
autocomplete.preloaderHide();
render(results);
}
});