Question

我正在使用自动完成的jQuery自动建议。建议下拉列表显示的是整个列表，而不是过滤后的列表。

小提琴-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;
        }
      ) 
    );
  }
});

Answer 2

建议下拉列表显示的是整个列表，而不是排序的列表。

这里想要的不是排序，而是过滤。

在source函数中，您需要从json过滤要使用的值。您还可以在此处进行排序，映射等。像

response(
  json.filter(
    function (jsonItem) {
      let sanitizedInput = $.ui.autocomplete.escapeRegex(request.term);
      return jsonItem.full_name.match(sanitizedInput);
    }
  )
  .map(/* transform to {id, value} or else in here if need be */)
  .sort(/* sort data in here if need be */)
)

这使用Array.prototype.filter和String.prototype.match。如果您还想进行排序，请检查geoidesic的答案所给出的提示。向函数传递函数时，请检查the behavior of source以获得完整信息。

jQuery自动完成功能正在呈现未过滤的数据

2 个答案: