Question

我想在搜索框中使用按键事件。实际上我使用ng-change编写了搜索框，因此Iam在按键事件中面临问题。我使用了ng-keyup ang ng-keydown但它无效。< / p>

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

null

JS

<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>

如何在自定义搜索框中使用关键事件？

3 个答案: