javascript - jquery 自动完成正在呈现未过滤的数据

Question

我正在使用 jquery auto complete 进行自动建议。建议下拉列表显示整个列表而不是筛选列表。

fiddle - http://jsfiddle.net/joshi101/zn609sdj/7/

HTML

<input type='text' />

jquery

    var json = [{"full_name": "joye dave", "username": "jd"}, {"full_name": "rob", "username": "r"}, {"full_name": "jhon key", "username": "jk"}, {"full_name": "alpacino", "username": "ap"}, {"full_name": "Julia", "username": "Julia"}];
$('input').autocomplete({
    source: function (request, response) {
     response( $.map( json , function(i){
            return{
              id: i.username,
              value: i.full_name
            }
          }))
        },
  focus: function( event, ui ) {
    $( "input" ).val( ui.item.id );
    return false;
  },

});

我在搜索过程中看到了类似的代码，但不知道为什么它不起作用。

Answer 1

如果您希望结果按字母顺序排序，则需要对您的对象进行排序。自动完成不会为您做这些。

https://jsfiddle.net/9zw3fu7t/

例如

function compare(a,b) {
  if (a.full_name.toLowerCase() < b.full_name.toLowerCase())
    return -1;
  if (a.full_name.toLowerCase() > b.full_name.toLowerCase())
    return 1;
  return 0;
}

json.sort(compare);

我在这里得到排序函数:Sort array of objects by string property value

不过，要让您的示例正常工作，需要注意一些问题。

首先，您的示例实际上并未执行自动完成 - 例如，当您输入“j”时，它会返回单词中任何位置包含“j”的所有内容。我不认为那是你想要的。所以你需要使用正则表达式匹配来测试单词的开头。

其次，一旦你这样做了，你的 $.map 函数需要移动:https://jsfiddle.net/7ky8whx2/

完整代码如下:

var json = [{"full_name": "joye dave", "username": "jd"}, {"full_name": "rob", "username": "r"}, {"full_name": "jhon key", "username": "jk"}, {"full_name": "alpacino", "username": "ap"}, {"full_name": "Julia", "username": "Julia"}];

var transformJson = function(json) {
  return $.map(json, function(i) {
    return {
      value: i.full_name,
      id: i.username,
    }
  });
}

function compare(a,b) {
  if (a.full_name.toLowerCase() < b.full_name.toLowerCase())
    return -1;
  if (a.full_name.toLowerCase() > b.full_name.toLowerCase())
    return 1;
  return 0;
}

json.sort(compare);

$( "input" ).autocomplete({
  source: function( request, response ) {
    var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
    response( 
      $.grep( 
        transformJson(json), 
        function( item ){
          found = matcher.test( item.value );
          return found;
        }
      ) 
    );
  }
});