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

Posted 2023-05-08

【中文标题】jQuery UI 自动完成：从对象数组加载：过滤被破坏

【英文标题】：jQuery UI Autocomplete: Load from Array of Objects: Filtering is broken

【发布时间】：2019-10-11 19:52:29

【问题描述】：

我正在关注给定 in this thread 的 JSFiddle 作为从简单的对象数组加载 jQuery UI AutoComplete 的解决方案：

http://jsfiddle.net/khsbme4k/

这里的过滤被破坏了。有 2 个数据行带有 First_Name 字符串，“Will”和“Willem”，但如果您键入其他内容，例如“WA”你仍然可以得到 2 个项目的完整选择，应该没有。

  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;
        

【问题讨论】：

您需要将地图数据传回过滤。使用$.ui.autocomplete.filter() 示例：jqueryui.com/autocomplete/#multiple

【参考方案1】：

考虑一下您的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);

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

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

希望对您有所帮助。

【参考方案2】：

使用 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">
	

【讨论】：

@gene，试试这个代码它会工作。在显示自动完成列表之前，我使用了 startsWith() 函数。

非常感谢！唯一的问题是“startsWith”，它可能应该是“indexOf！= -1”

是的，要使用 indexOf。我编辑我的代码。谢谢！