bootstrap-4-autocomplete
bootstrap-4-autocomplete copied to clipboard
Use with JSON Array?
I am trying to find a way to use this with JSON arrays containing objects. The docs say you can use any format you want as long as you specify the value and labels, but does not go into any detail on how to do so. Could you elaborate on this?
Hi @reynolds047 !
Like this?
var src = [
{value: '1', label: 'label-01'},
{value: '2', label: 'label-02'},
{value: '3', label: 'label-03'},
];
$('#myAutocomplete').autocomplete({
source: src,
value: 'value',
label: 'label',
});
Hello, I appreciate the response.
I was able to get your example to work, but I was unable to get it working with my custom src. Is it because my keys are strings?
var src = [
{ "ZipCode": "96162", "TaxRate": "8.25" },
{ "ZipCode": "96161", "TaxRate": "8.25" },
{ "ZipCode": "96160", "TaxRate": "8.25" },
{ "ZipCode": "96158", "TaxRate": "7.75" }
];
$('#myAutocomplete').autocomplete({
source: src,
value: 'TaxRate',
label: 'ZipCode'
});
Well @reynolds047, I've tested with your code and it is actually working. Maybe you forgot to set the treshold to a lower value? Remember the default is 4, so it will not show anything until you type at least 4 characters.
I set set the threshold to 2 characters, but keep getting "No results found". If it was working for you, then maybe its a problem with something else in my code. I appreciate the confirmation. I will update you if I get it working, if not for anything but reference for someone in the future. Have a good day, @Honatas !
After a lot of frustration, I figured it out, finally.
jQuery UI's autocomplete also uses $('#myAutocomplete').autocomplete({options})
syntax, so I was unable to create a 'bootstrap-4-autocomplete' widget.
I fixed this by going into node_modules/bootstrap-4-autocomplete
and changing $.fn.autocomplete
to $.fn.bs4autocomplete
, and in my JS, changing $('#myAutocomplete').autocomplete({options})
to $('#myAutocomplete').bs4autocomplete({options})
Oh my, I didn't know jQuery UI already had an autocomplete! Guess I'll have to do something about it.