通過對象數組的多個值過濾Jquery自動完成

我想設置自動填充插件，僅用於選擇列表中的有效員工。我有一個Employee對象的數組，具有EmployeeID和EmployeeName。目前，我已通過將所有Employee的EmployeeName複製到數組中並將其提供給安裝自動完成插件來加載EmployeeName的自動完成。通過對象數組的多個值過濾Jquery自動完成

var employeeNames = new Array(); 
for (var i = 0 ; i < employees.length ; i++) 
{ 
    employeeNames[a] = employees.Employee[a].Name; 
} 
$("#txtEmployeeName").autocomplete(employeeNames, { 
    multiple: true, 
    mustMatch: true, 
    autoFill: true 
});

它會做的工作，但我要的是，如果用戶想要在這個文本框輸入僱員，它加載的僱員建議過濾過，雖然它會顯示在建議中EmployeeNames的。有沒有什麼辦法可以實現，我記得我在某處看到它，但不記得該網站。

來源

2013-03-07 Taha Rehman Siddiqui

jQueryUI的需要值和/或標籤字段，如果使用的是一個對象：支持

多種類型：

陣列：數組可用於本地數據。有兩種支持格式：一個字符串數組：[「選擇1」，「選擇2」]

與標籤和值的屬性的對象數組： [{標號：「選擇1」，值：「VALUE1」} ，...]標籤屬性在建議菜單中顯示爲。當用戶選擇一個項目時，該值將被插入到輸入元素中。如果僅指定一個屬性，則它將用於兩者，例如，如果您只提供值屬性，則該值也將用作標籤。

來源：http://api.jqueryui.com/autocomplete/#option-source

考慮到這一點，你必須通過你的數據，包括價值屬性，你只分配給名稱（例如：$.each(employees, function(){ this.value = this.name }); ...）

現在你必須定義的其他事情是你想要如何過濾。這可以通過定義來源來完成。

例子：

$("#txtEmployeeName").autocomplete({ 
     source: function (request, response) { 
      var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 

      var matching = $.grep(employees, function (value) { 
       var name = value.value; 
       var id = value.id; 

       return matcher.test(name) || matcher.test(id); 
      }); 
      response(matching); 
     } 
    });

提琴手例如：http://fiddle.jshell.net/YJkTr/

全碼：

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Demo</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 


    <script> 
     $(function() { 
      var employees = [ 
       { "value": "Tom", "id": "1" }, 
       { "value": "Stefan", "id": "2" }, 
       { "value": "Martin", "id": "3" }, 
       { "value": "Sara", "id": "4" }, 
       { "value": "Valarie", "id": "5" }, 
      ] 

      $("#txtEmployeeName").autocomplete({ 
       source: function (request, response) { 
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 

        var matching = $.grep(employees, function (value) { 
         var name = value.value; 
         var id = value.id; 

         return matcher.test(name) || matcher.test(id); 
        }); 
        response(matching); 
       } 
      }); 
     }); 
    </script> 
</head> 
<body style="font-size: 62.5%;"> 
    <div class="ui-widget"> 
     <form> 
      <label for="txtEmployeeName">Developer:</label> 
      <input id="txtEmployeeName" /> 
     </form> 
    </div> 
</body> 
</html>

來源

2013-03-07 10:39:37 Stefan

謝謝，我改了稱呼，因此可以更容易地找到 – Stefan 2013-03-07 10:56:46

我還有一個問題斯特凡，如何在選擇事件中重新綁定自動填充。就像我想從我剛剛選擇的建議中刪除該項目。我怎麼做？ – 2013-03-07 13:16:27

發現了^ – 2013-03-11 11:48:04

通過對象數組的多個值過濾Jquery自動完成

回答

相關問題