jQueryUI 自动完成没有正确过滤来自 JSON 文件的结果

Question

我已经在我的测试站点http://karem.kaidez.com/ 上配置了一个带有自动完成小部件的 jQueryUI 驱动的搜索。数据由.json 文件填充，并且所有结果都出现在我希望根据我在搜索框中输入的内容进行过滤时。

搜索框嵌入在 HTML 中，如下所示：

<input type="text" id="searchfield" class="searchfield-style" placeholder="Search..." />

具体的jQueryUI代码如下：

  define("search", ["jquery","jqui"], function($, jqui) { //running via RequireJS
  $("#searchfield").autocomplete({
    source: function( request, response ) {
      $.ajax({
        url: "search.json",
        dataType: "json",
        data: {term: request.term},
        success: function(data) {
          response($.map(data, function(item) {
            return {
              label: item.title
            };
          }));
        }
      });
    },
    minLength: 0,
    select: function(event, ui) {
     //code comes later
    }
  });
});

search.json 看起来像这样：

[

  {
    "title":"lorem",
    "url":"/lorem/"
  },

  {
    "title":"ipsum",
    "url":"/ipsum/"
  },

 false
 /*
  * This 'false' is here because the JSON file is being built via a Jekyll 
  * plugin and adding commas at the end of the final key/value pait.
  * Adding 'false' makes the file valid JSON. 
  */

]

我确实看到了这个其他 SO 问题/答案here，我认为我在确保正确配置 term 参数方面做的一切都是正确的。我想认为修复很简单，但不确定。

Answer 1

try this

    ('#searchfield').autocomplete({
        source: function( request, response ) {
  $.ajax({
    url: "search.json",
    dataType: "json",
    data: {term: request.term},
    success: function(data) {
      response($.map(data, function(item) {
        return {
          label: item.title
        };
      }));
    }
  });
},
        minLength: 2,
        search: function(oEvent, oUi) {
            var selectedValue = $(oEvent.target).val();
            var aSearch = [];
            $('source').each(function(index, value) {
                if (value.substr(0, selectedValue .length) == selectedValue ) 
                    aSearch.push(value);               
            });

            $(this).autocomplete('option', 'source', aSearch);
        }
    });