angularjs自定義篩選器在下拉列表中

Question

我有ul li元素，其中是寫入用戶列表。 我有一個輸入，用戶可以在其中編寫和過濾用戶列表。 ，這個ul元素默認是隱藏的。在關注輸入之後，我展示了這個ul元素，並且模糊地隱藏了這個ul。

<input type="text" autocomplete="off" ng-model="checkData[key]" /> 

<ul> 
    <li ng-repeat="user in users | identification:checkData[key]">{{user}}</li> 
</ul> 

我的過濾器：

return (items: Array<string|number>, value: string|number) => 
{ 
    if(typeof items !== 'undefined') 
    { 
     var filtered: Array<string|number> = []; 

     for(var i: number = 0, length: number = items.length; i < length; i++) 
     { 
      var element: string|number = items[i]; 

      if((((element + '').indexOf(value + '') === 0) && element !== value) || typeof value === 'undefined') 
      { 
       filtered.push(element); 
      } 
     } 
     return filtered; 
    } 
} 

這工作外觀極好，但我的一個問題。當用戶在輸入中輸入一些值時，ul元素中的用戶列表將被過濾。

所以當用戶再次關注輸入時，在ul中顯示過濾的數據。我想在每個焦點上顯示完整列表並且不要刪除輸入值。

如何實現這一目標？

Answer 1

您可以只用在一個參數傳遞到過濾器的方法，用這種方法禁用焦點過濾器：

<ul> 
    <li ng-repeat="user in users | identification:checkData[key]:isEnabled" ng-focus="isEnabled = false;">{{user}}</li> 
</ul> 

修改你的過濾器：

return (items: Array<string|number>, value: string|number, isEnabled: boolean) => 
{ 
    if (!isEnabled) { 
     return items; // Return the unfiltered list ... 
    } 
    if(typeof items !== 'undefined') 
    { 
     var filtered: Array<string|number> = []; 

     for(var i: number = 0, length: number = items.length; i < length; i++) 
     { 
      var element: string|number = items[i]; 

      if((((element + '').indexOf(value + '') === 0) && element !== value) || typeof value === 'undefined') 
      { 
       filtered.push(element); 
      } 
     } 
     return filtered; 
    } 
} 

Answer 2

這將這樣的伎倆。試試這個。

<input type="text" autocomplete="off" ng-model="checkData[key]" ng-focus="filterKey[key] = ''" ng-blur="filterKey[key] = checkData[key]"/> 
<!-- hidden field to save search text --> 
<input type="hidden" ng-model="filterKey[key]"/> 
<ul> 
    <li ng-repeat="user in users | identification:filterKey[key]">{{user}}</li> 
</ul>