bootstrap-4-autocomplete icon indicating copy to clipboard operation
bootstrap-4-autocomplete copied to clipboard

Use with JSON Array?

Open reynolds047 opened this issue 4 years ago • 6 comments

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?

reynolds047 avatar Jan 29 '21 22:01 reynolds047

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',
});

Honatas avatar Jan 31 '21 22:01 Honatas

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'
});

reynolds047 avatar Feb 01 '21 20:02 reynolds047

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.

Honatas avatar Feb 02 '21 14:02 Honatas

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 !

reynolds047 avatar Feb 02 '21 15:02 reynolds047

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})

reynolds047 avatar Feb 02 '21 21:02 reynolds047

Oh my, I didn't know jQuery UI already had an autocomplete! Guess I'll have to do something about it.

Honatas avatar Feb 03 '21 11:02 Honatas