<body> <div ng-app="mvcapp" ng-controller="AngularController"> <input type="text" class="myInput form-control" name="txtStorename" id="txtStorename" placeholder="Search for Store.." title="Type in a Store" data-error-message="Please enter StoreName" ng-model="sname" > <ul id="myUL" ng-repeat="StoreList in Store| filter:{StoreName:sname}"> <li ng-click="SelectedValue(StoreList.StoreName)">{{StoreList.StoreName}}</li> </ul> <div ng-show="(Store|filter:sname).length==0" style="color:red;font-weight:bold">No Result Found</div> </div> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> <script> var angular = angular.module('mvcapp', []); angular.controller('AngularController', function ($scope, $http) { Getallitem() function Getallitem() { $http.get('/Coupons/GetStore').success(function (data) { $scope.Store = data; }); } $scope.SelectedValue = function (item) { document.getElementById("txtStorename").value = item; } }); </script> </body> 
- please explain the problem you are facing!– Gaurav SrivastavaCommentedNov 2, 2017 at 6:25
- Sir the list pops up on form load.there is a drop down list below the textbox which comes on load .what i want is that the list should show up on keyup event of textbox . and i cant find a solution to do that– Asad KapadiaCommentedNov 2, 2017 at 6:30
Add a comment |
1 Answer
It works:
angular.module('app', []) .controller('Controller', function($scope) { $scope.obj = {}; $scope.obj.showList = false; $scope.Getallitem = function(){ $scope.Store = []; $scope.Store[0] = {} $scope.Store[1] = {}; $scope.Store[0].StoreName = "Test1"; $scope.Store[1].StoreName = "Test2"; } $scope.Getallitem(); console.log($scope.Store); $scope.SelectedValue = function (item) { $scope.obj.showList = false; $scope.obj.sname = item; } })<!DOCTYPE html> <head> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script> <script src="script.js"></script> </head> <body ng-app="app"> <div ng-controller="Controller"> <input type="text" ng-keyup="obj.showList = true;" class="myInput form-control" name="txtStorename" id="txtStorename" placeholder="Search for Store.." title="Type in a Store" data-error-message="Please enter StoreName" ng-model="obj.sname"> <ul ng-if="obj.sname && obj.showList" id="myUL" ng-repeat="StoreList in Store| filter:{StoreName:sname}"> <li ng-click="SelectedValue(StoreList.StoreName)">{{StoreList.StoreName}}</li> </ul> <div ng-show="(Store|filter:obj.sname).length==0" style="color:red;font-weight:bold">No Result Found</div> </div> </body> </html> answered Nov 2, 2017 at 6:34
- and sir this code is working fine but the problem is on emptying the text box the list should close and on selecting the list item the list should minimize to that selected valueCommentedNov 2, 2017 at 6:48
- Sir this is perfect but my list is from database and uve hardcoded the list so how do i call that in scope.getallitem function()CommentedNov 2, 2017 at 7:11
- @AsadKapadia like you were calling in your code, i edited the code in snippet to show that its working.CommentedNov 2, 2017 at 7:23
- Sir is it possible to use keyboard ( Up and Down key) for navigation of list .like to scroll on listCommentedNov 2, 2017 at 9:46
