如何在自定義搜索框中使用關鍵事件？

Question

我想在搜索框中使用按鍵事件。實際上，我使用ng-change編寫了搜索框，所以Iam在按鍵事件中遇到了問題。我使用了ng-keyup ang ng-keydown，但它不起作用。

HTML：

<div class="input-group dropdown"> 
<input type="text" ng-model="value" data-toggle="dropdown" ng-change="fnAutocomplete(value)" ng-keyup="fnAutocomplete(value)" ng-keydown="fnAutocomplete(value)"> 
    <div class="dropdown-menu width-menu"> 
     <ul> 
      <li ng-repeat="value in data | filter: value" ng-click="value=value.txt" tabindex="-1" ng-keyup="fnAutocomplete(value)" ng-keydown="fnAutocomplete(value)"> 
         {{value.txt}} 
      </li> 
     </ul> 
    </div> 

JS：

$scope.fnAutocomplete= function (question) { 
     $scope.data = [{ "val": 1, "txt": "Brown" }, { "val": 2, "txt": 
     "Red" }, { "val": 3, "txt": "White" }, { "val": 4, "txt": "Amristar" 
     }, { "val": 5, "txt": "Yellow" }, { "val": 6, "txt": "Pink" }, { 
    "val": 7, "txt": "Orange" }, { "val": 8, "txt": "Green"}, { "val": 9, 
    "txt": "Blue" }, { "val": 10, "txt": "Black" }, { "val": 11, "txt": 
    "Indigo" }, { "val": 12, "txt": "Purple" }, { "val": 13, "txt": 
    "Voliet" }, { "val": 14, "txt": "Grey" }, { "val": 15, "txt": "cream" 
    }]; 
     console.log($scope.data); 
     } 

我需要在列表中的關鍵事件，如圖中的圖像。

在此先感謝。

它已經2小時完成了，請任何人都幫助我。

Answer 1

您可以將$event傳遞給您的功能，以觀察哪個鍵被按下。

ng-keyup="fnAutocomplete($event, value) 

然後在你的控制器：

$scope.fnAutocomplete= function($event, value) { 
    // Get Key Event 
    var key = $event.keyCode; 
} 

Answer 2

沒有任何理由不使用ng-click這裏？

Answer 3

嘿，我已經嘗試解決您的要求，請嘗試它，讓我們知道。

HTML

<div class="input-group dropdown"> 
      <input id="custSearch" type="text" ng-model="value" data-toggle="dropdown" ng-change="fnAutocomplete(value)" ng-keyup="fnAutocomplete(value)" ng-keydown="fnAutocomplete(value)" ng-click="fnAutocomplete(value)"> 
       <div id="listBox" class="dropdown-menu width-menu"> 
        <ul> 
         <li ng-repeat="value in data | filter: value" ng-click="selectfromList(value.txt); " tabindex="-1" ng-keyup="fnAutocomplete(value)" ng-keydown="fnAutocomplete(value)" style="cursor: pointer;"> 
            {{value.txt}} 
         </li> 
        </ul> 
       </div> 
     </div> 

JS

$scope.fnAutocomplete= function (question) { 
     document.getElementById('listBox').style.display = 'block'; 
     $scope.data = [{ "val": 1, "txt": "Brown" }, { "val": 2, "txt": 
     "Red" }, { "val": 3, "txt": "White" }, { "val": 4, "txt": "Amristar" 
     }, { "val": 5, "txt": "Yellow" }, { "val": 6, "txt": "Pink" }, { 
    "val": 7, "txt": "Orange" }, { "val": 8, "txt": "Green"}, { "val": 9, 
    "txt": "Blue" }, { "val": 10, "txt": "Black" }, { "val": 11, "txt": 
    "Indigo" }, { "val": 12, "txt": "Purple" }, { "val": 13, "txt": 
    "Voliet" }, { "val": 14, "txt": "Grey" }, { "val": 15, "txt": "cream" 
    }]; 
     } 

     $scope.selectfromList = function(values){ 
     if(values != undefined) 
     { 
      document.getElementById('custSearch').value = values; 
      document.getElementById('listBox').style.display = 'none'; 
     } 
     }