Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use with JSON Array? #22

Open
reynolds047 opened this issue Jan 29, 2021 · 6 comments
Open

Use with JSON Array? #22

reynolds047 opened this issue Jan 29, 2021 · 6 comments

Comments

@reynolds047
Copy link

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?

@Honatas
Copy link
Owner

Honatas commented Jan 31, 2021

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

@reynolds047
Copy link
Author

reynolds047 commented Feb 1, 2021

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

@Honatas
Copy link
Owner

Honatas commented Feb 2, 2021

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.

@reynolds047
Copy link
Author

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
Copy link
Author

reynolds047 commented Feb 2, 2021

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

@Honatas
Copy link
Owner

Honatas commented Feb 3, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants