CODEWITHSUNDEEP
javascriptangularjs
pbsbr
pbsbr

Reputation: 385

how to use key events in customized search box?

I want to use key press events in search box.Actually I wrote the search box using ng-change,so Iam facing problem in key press events.I used ng-keyup ang ng-keydown but it is not working.

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);
      }

I need key events in the list as shown in image.

enter image description here

Thanks in advance.

It's already 2 hours completed,please anyone help me in this.

Upvotes: 0

Views: 65

Answers (3)

SjVnyk
SjVnyk

Reputation: 758

Hey I have tried workaround for your requirement, Please try it and let us known.

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';
        }
      }

Upvotes: 0

SjVnyk
SjVnyk

Reputation: 758

Is there any reason for not using ng-click here??

Upvotes: 1

Ben
Ben

Reputation: 2706

You can pass $event to your function to observe which key was pressed.

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

Then in your controller:

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

Upvotes: 1

Related Questions