jQuery自动完成呈现未过滤的数据

乔希·R

我正在使用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;
  },

});

在搜索过程中，我已经看到类似的代码可以正常工作，但是却不知道为什么它不起作用。

大地测量学

如果要按字母顺序对结果进行排序，则需要对对象进行排序。自动完成功能不适合您。

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

我在这里获得了排序功能：按字符串属性值对对象数组进行排序

为了使您的示例正常工作，有一些陷阱。

首先，您的示例实际上并没有进行自动填充-例如，当您输入“ 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;
        }
      ) 
    );
  }
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。