jQuery UI 自动完成：从对象数组加载：过滤被破坏

Question

我正在关注给定的 JSFiddle 作为从一个简单的对象数组加载 jQuery UI 自动完成的解决方案：

过滤在这里被破坏。有 2 个带有 First_Name 字符串的数据行，"Will" 和 "Willem"，但是如果您键入其他任何内容，例如"WA" 您仍然可以获得 2 项的全部选择，其中应该有 none。

  var data = [
        {
            "id": 1,
            "first_name": "Will",
            "last_name": "Smith",
            "created_at": "2015-01-27T13:09:20.243Z",
            "updated_at": "2015-01-27T13:09:20.243Z"
        },
        {
            "id": 2,
            "first_name": "Willem",
            "last_name": "Dafoe",
            "created_at": "2015-01-27T13:17:23.479Z",
            "updated_at": "2015-01-27T13:17:23.479Z"
        }
    ];

$('#search').autocomplete({
        // This shows the min length of charcters that must be typed before the autocomplete looks for a match.
        minLength: 2,
source: function (request, response) {
           response($.map(data, function (value, key) {
                return {
                    label: value.first_name,
                    value: value.id
                }
            }));

    },    
        focus: function(event, ui) {
            $('#search').val(ui.item.first_name);
            return false;
        },
        // Once a value in the drop down list is selected, do the following:
        select: function(event, ui) {
            // place the person.given_name value into the textfield called 'select_origin'...
            $('#search').val(ui.item.first_name);
            // and place the person.id into the hidden textfield called 'link_origin_id'. 
            $('#link_origin_id').val(ui.item.id);
                return false;
        }

Answer 1

使用 indexOf() 方法获取搜索项的自动完成列表。

     $(function() {
    var data = [
        {
            "id": 1,
            "first_name": "Will",
            "last_name": "Smith",
            "created_at": "2015-01-27T13:09:20.243Z",
            "updated_at": "2015-01-27T13:09:20.243Z"
        },
        {
            "id": 2,
            "first_name": "Willem",
            "last_name": "Dafoe",
            "created_at": "2015-01-27T13:17:23.479Z",
            "updated_at": "2015-01-27T13:17:23.479Z"
        }
    ];

var auto_array = {};
$('#search').autocomplete({
 // This shows the min length of charcters that must be typed before the autocomplete looks for a match.
 minLength: 2,
source: function (request, response) {
    response($.map(data, function (value, key) {
    
   //get the list of autocomplete start with search value. for case insensitive i used the toUpperCase() function.
   var first_name = value.first_name.toUpperCase()
   if(first_name.indexOf(request.term.toUpperCase()) != -1){
    label = value.first_name;
    auto_array[label] = value.id;
    return label;
   }else{
    return null;
   }
  }));

},    
 
  select: function(event, ui) {
  $('#link_origin_id').val(auto_array[ui.item.value]);
   }
     
});
});

 
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

    <input type="text" id="search">
 <input type="text" id="link_origin_id">

Answer 2

考虑以下 source 的代码示例：

source: function(request, response) {
  var results;
  var aData = $.map(data, function(value, key) {
    return {
      label: value.first_name,
      value: value.id
    }
  });
  results = $.ui.autocomplete.filter(aData, request.term);
  response(results);
}

首先，我们将您的数据映射到自动完成所期望的 { label, value } 对。然后我们使用 $.ui.autocomplete.filter() 来执行预期的过滤，就像自动完成一样。这为我们提供了结果数组，我们可以将其发送到 response() 进行显示。

工作示例：https://jsfiddle.net/Twisty/svnbw2uj/3/

希望对您有所帮助。

jQuery UI 自动完成：从对象数组加载：过滤被破坏

jQuery UI Autocomplete: Load from Array of Objects: Filtering is broken

jquery

jquery-ui

jquery-ui-autocomplete