jQuery UI Autocomplete parsing data

Question

I'm trying to add autocomplete to my search input:

jQuery( "#search_word" ).autocomplete({
  source: function(request, response) {
    $.getJSON("/search/auto-complete", { k: $('#search_word').val() },
      response);
  },
  select: function( event, ui ) {
    var item = ui.item;
    jQuery(this).val(item.value);
    if (item.url) {
      window.location.href = item.url;
      return false;
    }
    var page_name = jQuery(this).attr('data-page-name');
    submitCategory();
  }
});

But as you can probably guess, I couldn't. Some extra fields are returned if they have the same keyword.

I created a fiddle:

http://jsfiddle.net/wuktx4xr/

Nobody has to fix it for me. I just want to know how can I parse the data and show a response.

The data that my source callback returns looks like this:

{
  "keyword": ["zippo","zippo lighter","zippo warmer"],

  "store":{
    "storeId":44922, 
    "storeName":"Zippo", 
    "storeTitle":"Zippo", 
    "storeLogoUrl":"http://images.server.com/d/store/d_44922.jpg",
    "storeSlug":"zippo"
  }
}

keyword includes autocomplete options. store isn't always populated. If it is, I want to include storeTitle as the last value in my autocomplete options.

Thanks.

klenwell · Accepted Answer · 2014-08-18 16:16:07Z

1

Your fiddle isn't going to work for a couple reasons. One, if you check the console, there appears to be a syntax error. Two, that url for your AJAX call isn't going to work.

That aside, this is what I think you're looking to do:

$('#search_word').autocomplete({
  source: function(request, response) {
    $.getJSON(
        '/search/auto-complete',
        { k: request.term },
        function(data) {
          var options = data.keyword;

          if ( data.store ) {
            options.push(data.store.storeTitle);
          }

          response(options);
        }
    );
  },

  select: function( event, ui ) {
    var userSelected = ui.item.value;
    // do something with userSelected value
  }
});

Notice, in particular, how the response argument is used with the getJSON callback. response, as explained in the docs, expects an array of strings, so use a data property appropriate to your backend response.

For a demonstration that mocks a remote call, see this fiddle:

http://jsfiddle.net/klenwell/mborem1p/

edited Aug 18, 2014 at 16:16

answered Aug 16, 2014 at 19:05

klenwell

7,1485 gold badges52 silver badges86 bronze badges

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

2 Comments

linepisode Over a year ago

Thanks for reply and edits. Actually, my confusion is about my JSON data. "keyword" is an array but "store" is an object. So, i don't know how can i parse them in one $.each function. Because my goal is here, using "keyword"'s and "store"'s values all together(if store value returns). my expectation

klenwell Over a year ago

@linepisode I've modified the question and my answer to reflect the additional information you provided. This doesn't necessarily get you all the way there but it should get you close enough. I don't think it's possible to include an image in the autocomplete options. There may be clever ways to rig that up, but it would be beyond the scope of this question.

Collectives™ on Stack Overflow

jQuery UI Autocomplete parsing data

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related