I have created an autocomplete popup smart search list using the code below:
self.autocompleteStandaloneAjax = app.autocomplete.create({
openIn: 'popup', //open in page
openerEl: '#destination-ajax', //link that opens autocomplete
multiple: true, //allow multiple values
valueProperty: 'id', //object's "value" property name
textProperty: 'name', //object's "text" property name
limit: 50,
preloader: true, //enable preloader
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: 'data_1.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]);
}
// Hide Preoloader
autocomplete.preloaderHide();
// Render items by passing array with result items
render(results);
}
});
},
on: {
change: function (value) {
var itemText = [],
inputValue = [];
for (var i = 0; i < value.length; i++) {
itemText.push(value[i].name);
inputValue.push(value[i].id);
}
// Add item text value to item-after
$('#destination-ajax').find('.item-after').text(itemText.join(', '));
// Add item value to input value
$('#destination-ajax').find('input').val(inputValue.join(', '));
},
},
});
and I was able to get the value I type in the search using this:
open: function (value) {
$('.searchbar-input-wrap input[type=search]').on('input', function() {
val = $('.searchbar-input-wrap input[type=search]').val();
if (val.length > 0)
{
Ajax call to request new data...
}
…
I just want to recreate the rendered data options if the val.length > 0 with new options
this means when I type something in the search box then the new options are loaded via Ajax calling a new JSON that has the new options to be displayed and searched …and the initial options are overwritten with this new data…
my question is how can I do this…?
I tried this code below and the data in the console it is showing correct but the new rendered data does not updates the previous one…
here it is the code
Ajax call to request new data…
query = $('.searchbar-input-wrap input[type=search]').val();
app.request({
url: 'data_2.json',
method: 'GET',
dataType: 'json',
//send "query" to server. Useful in case you generate response dynamically
data: {
query: query
},
success: function (data) {
// Find matched item
console.log(data.length);
for (var i = 0; i < data.length; i++) {
//alert(data[i].name.toLowerCase().indexOf(query.toLowerCase()));
if (data[i].name.toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(data[i]);
}
console.log(results);
render(results);
}
});
if you see render(results) it is ok and show in the console the new data options, I just want to overwrite the previous options with these…
I just want to refresh the initial rendered data with new data… after an actions is happening in this case when I type something on the search box…
any clues how to achieve this?
big thanks
