jQuery autocomplete with JSON not using "value" or "label"

Question

Sorry if there is a decent example of this somewhere outer, I've been looking for days and can't find a solution.

Gathering data from JSON file "database.json":

"[{\"id\":\"1\",\"state\":\"Alaska\"},{\"id\":\"2\",\"state\":\"Alabama\"},{\"id\":\"3\",\"state\":\"California\"}]"

Here is my most recent attempt that failed:

$("#state").autocomplete({
                       source: function( request, response ) {
                       $.ajax({
                           url: "database.json",
                           dataType: "json",
                           data: {term: request.term},
                           success: function(data) {
                                     console.log(data)
                                       response($.map(data, function(item) {
                                       return {
                                           label: item.state,
                                           id: item.id,
                                       };
                                   }));
                               }
                           });
                       },
                       minLength: 2,
                       select: function(event, ui) {
                           $('#state_id').val(ui.item.id);
                       }
                   });

And of course the html:

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

I have no idea where to go from here, I just want a simple drop down autocomplete. Let me know if more information is needed and I can provide.

Thank you!

if the ajax request returns the value, it looks fine - jsfiddle.net/arunpjohny/dqggjdj8/1 — Arun P Johny
– Arun P Johny, Commented Sep 10, 2014 at 2:04
@ArunPJohny No error in console. I just simply don't see the values dropped down. Does that mean there is an issue with the accessibility of "database.json"? — user2480176
– user2480176, Commented Sep 10, 2014 at 2:10
in the success handler log the value of data like console.log(data) — Arun P Johny
– Arun P Johny, Commented Sep 10, 2014 at 2:12
data is the param to the success callback... so you need to add the console logging inside the success callback just before response($.map(data, function(item) { — Arun P Johny
– Arun P Johny, Commented Sep 10, 2014 at 2:22

user2480176 · Accepted Answer · 2014-09-11 03:33:50Z

1

With a lot of help from @ArunPJohny I was able to get the out complete to work with the addition of

data  = JSON.parse(data);

just below success: function(data) {

The problem was that my JSON was saved as a string and not strict JSON so I needed to parse it first.

answered Sep 11, 2014 at 3:33

user2480176

1473 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

jQuery autocomplete with JSON not using "value" or "label"

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related