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回调一起使用。如the docs中所述，response需要一个字符串数组，因此请使用适合后端响应的data属性。

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

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

jQuery UI自动完成解析数据

1 个答案: