Removed download data for dropdown in Selectize
I have text input which I selected as tags, which works great. I can create new items and they display correctly.
I want to get remote download data in a dropdown for a suggestion like google. I followed the documentation , but the json that ajax returns is not showing up in the dropdown. The ajax call succeeded as my console shows this returned json:
["New York", "New Jersey", "New Mexico", "New Hampshire"]
In the drop-down list only: "Add new ... .
This is my code with selectize:
<script>
$(function() {
$('.offerInput').selectize
({
delimiter: '♥',
plugins: ['remove_button'],
valueField: 'value',
labelField: 'value',
searchField: 'value',
openOnFocus: true,
options: [],
create: function(input)
{
return {
value: input,
text: input
}
},
render: {
option: function (item, escape) {
console.log(item);
return '<div>' + escape(item.value) + '</div>';
}
},
load: function (query, callback) {
if (!query.length) return callback();
$.ajax({
url: '/as/' + query,
type: 'GET',
dataType: 'json',
error: function () {
callback();
},
success: function (res) {
console.log(res);
callback(res);
}
});
}
})
});
and here is my input field:
<input type="text" id="appbundle_offers" name="appbundle_[offers]" required="required" placeholder="offers" class="offerInput selectized" value="" tabindex="-1" style="display: none;">
Any ideas on something wrong? Thank you for your help!
source to share
Your problem returned by the service
["New York", "New Jersey", "New Mexico", "New Hampshire"]
But your function render
is looking for a property value
:
render: {
option: function (item, escape) {
console.log(item);
return '<div>' + escape(item.value) + '</div>';
}
}
You should either change your service to return values:
[{"value":"New York"},{"value":"New Jersey"},{"value":"New Mexico"},{"value":"New Hampshire"}]
Or change the render to use the element:
return '<div>' + escape(item) + '</div>';
source to share