jQueryUI自动完成解析数据

我正在尝试将自动完成添加到搜索输入：

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

但正如你可能猜到的，我不能。如果有相同的关键字，则返回一些额外字段

我创作了一把小提琴：

没人要帮我修。我只是想知道如何解析数据并显示响应

源回调返回的数据如下所示：

{
  "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"
  }
}

关键字

包括自动完成选项<代码>存储并不总是填充。如果是，我希望将

storeTitle

作为自动完成选项中的最后一个值

---

谢谢。

由于几个原因，你的小提琴不能用了。第一，如果您检查控制台，似乎有语法错误。第二，用于AJAX调用的url不起作用

除此之外，这是我认为你想要做的：

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

请特别注意，

response

参数如何与

getJSON

回调一起使用<代码>响应，如中所述，需要一个字符串数组，因此请使用适合后端响应的

数据

属性

有关模拟远程调用的演示，请参见此提琴：

---

感谢您的回复和编辑。实际上，我的困惑在于我的JSON数据。“关键字”是数组，“存储”是对象。所以，我不知道如何在一个$中解析它们。每个函数。因为我的目标是在这里，同时使用“关键字”和“存储”的值（如果存储值返回）@linepisode我修改了问题和答案，以反映您提供的其他信息。这不一定能让你一直走到那里，但它应该能让你离得足够近。我认为不可能在自动完成选项中包含图像。也许有聪明的方法来操纵它，但这超出了这个问题的范围。