jQuery autocomplete doesn't work with key value pair array

Question

I try to create an autocomplete field with jQuery autocomplete widget, but it seems that does not work for some reason.

The code I use is the following:

HTML

<input type="text" id="specialties" />

JavaScript

var $specialties = [
    {
        id : 107,
        name : 'Painting'
    },
    {
        id : 158,
        name : 'Reading'
    }
];

var $specialty_text_field   =   $('#specialties');

$specialty_text_field.autocomplete(
    {
        source    : $specialties,
        minLength : 3
    }
);

And when I enter in the text field the text Pain I am getting as a result the text No search results.

What can be wrong with this code ?

@NaveenThally This is what I try but I get a console error that I cannot figure out. Here is the fiddle URL (jsfiddle.net/ZQ9T3). If somebody can help to fix the issue please? — KodeFor.Me
– KodeFor.Me, Commented Jul 26, 2014 at 11:11
You have both #autocomplete and #specialties, which should be? — Sergio
– Sergio, Commented Jul 26, 2014 at 11:12
your souce needs to ba an array cosisting of Strings. you are giving an array consisting of objects... — Pinoniq
– Pinoniq, Commented Jul 26, 2014 at 11:12

Community · Accepted Answer · 2020-06-20 09:12:55Z

6

As it is clearly stated in the docs, your fields must be labeled label and value.

Array: An array can be used for local data. There are two supported formats:
An array of strings: [ "Choice1", "Choice2" ]
An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

EDIT : And as it has been pointed out, the input's id is autocomplete, not specialties.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 26, 2014 at 11:14

Waldo Jeffers

2,2791 gold badge17 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

KodeFor.Me Over a year ago

Thanks @Waldo Jeffers. That was the problem. Now it is working. I will mark your topic as the correct answer in a minute.

KodeFor.Me Over a year ago

The text field id was wrong in stackoverflow. I just fixed this issue. In my local code this is correct :)

Collectives™ on Stack Overflow

jQuery autocomplete doesn't work with key value pair array

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related