在angularjs中以ng-repeat自动完成搜索?

时间:2016-10-27 11:35:49

标签: javascript jquery angularjs

我的代码我有3 ng重复基于按键事件值,我从服务和iam消费中获取数据 我的HTML代码是:

<div class="input-group" ng-controller="sidemenu">
    <input class="form-control" placeholder="Enter location, builder or project"  ng-model="NodeId_1" autofocus  ng-keyup="getValue($event.keyCode)"/>
    <div class="search-datalist" ng-if="showsearch">
        <ul ng-if="resultOfBuldDet.length>0">
            <span class="result-hd">Builders</span>
            <li  ng-repeat="bud in resultOfBuldDet" ng-class="{active :2}" ng-click="searchFilter(bud)"><i class="fa fa-map-marker"></i> {{bud.builders_name}}</li>
        </ul>
        <ul ng-if="resultOfPropDet.length>0">
            <span class="result-hd">Properties</span>
            <li ng-repeat="prop in resultOfPropDet" ng-click="searchFilter(prop)"><i class="fa fa-map-marker"></i> {{prop.property_name}} ,{{prop.hp_city.city_name}},{{prop.hp_location.location_name}} </li>  
        </ul>
        <ul ng-if="resultOfCityDet.length>0">
            <span class="result-hd">cities</span>
            <li ng-repeat="city in resultOfCityDet" ng-click="searchFilter(city)"><i class="fa fa-map-marker"> </i> {{city.city_name}}</li>
        </ul>
        <ul ng-if="resultOfLocaDet.length>0">
            <span class="result-hd">Location</span>
            <li ng-repeat="loc in resultOfLocaDet" ng-click="searchFilter(loc)"><i class="fa fa-map-marker"></i> {{loc.location_name}},{{loc.hp_city.city_name}}</li>
        </ul>   
        <ul ng-if="resultOfSubLocaDet.length>0">
            <span class="result-hd">sub Location</span> 
            <li ng-repeat="subloc in resultOfSubLocaDet" ng-click=" searchFilter(subloc)"><i class="fa fa-map-marker"></i> {{subloc.sub_location_name}},{{subloc.hp_location.location_name}},{{subloc.hp_location.hp_city.city_name}}</li>
        </ul>         
    </div>
</div>

我的控制器js代码:

 sidemenu.controller('sidemenu', ['$scope', '$rootScope', 'allServices'

        function(a, b,e) {

  a.getValue = function(key) {
            if (key == 8 && a.NodeId_1.length <= 2) {

                a.resultOfPropDet = "";
                a.resultOfBuldDet = "";
                a.resultOfLocaDet = "";
                a.resultOfCityDet = "";
                a.resultOfSubLocaDet = "";
            }

            if (a.NodeId_1.length > 2) {
                e.searchList(a.NodeId_1).then(function(result) {
                    a.resultOfPropDet = result.data.resultOfPropDet;
                    a.resultOfBuldDet = result.data.resultOfBuldDet;
                    a.resultOfLocaDet = result.data.resultOfLocaDet;
                    a.resultOfCityDet = result.data.resultOfCityDet;
                    a.resultOfSubLocaDet = result.data.resultOfSubLocaDet;
                    a.showsearch = true;
                }, function(error) {

                });
            }
        }



});

所以当我在键盘上上下移动箭头时,要突出显示特定行并触发特定功能 像这样enter image description here

0 个答案:

没有答案