jQuery UI 自动完成解析数据

Question

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

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

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

我创建了一个小提琴：

http://jsfiddle.net/wuktx4xr/

没有人需要为我修理它。我只想知道如何解析数据并显示响应。

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

{
  "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 包括自动完成选项。 store 并不总是被填充。如果是，我想将 storeTitle 作为自动完成选项中的最后一个值。

谢谢。

Answer 1

由于几个原因，您的小提琴无法正常工作。一，如果你检查控制台，似乎有语法错误。第二，你的 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 回调一起使用。 response，如 the docs 中所述，需要一个字符串数组，因此请使用适合您的后端响应的 data 属性。

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

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