Angular TypeAhead使用笔记

 

参考资料：

https://angular-ui.github.io/bootstrap/#/getting_started

 

 思路：

（1）ng-keyup事件：每有输入，则从数据库获取匹配项，作为候选项

（2）typeahead-on-select事件：选中候选项后，从数据库获取详情

 

Html代码：

               <script type="text/javascript" src="/Assets/JS/pluginsDDhunter/angular-bootstrap/ui-bootstrap-tpls-1.3.3.min.js"></script>
                         
　　　　　　　　　　　　　　　　　　　　    <input name="OrgName" ng-model="modelPosition.OrgName" class="form-control " placeholder=""
                                            type="text" ng-required="true" ng-pattern="/^[\u4e00-\u9fa5A-za-z0-9 ]{5,20}/" form-field-errormsg="{ pattern: '至少5个字符',}"
                                            uib-typeahead="state for state in CompanyList | filter:$viewValue | limitTo:8"
                                            ng-keyup="funcGetCompanyList($event)"
                                            typeahead-on-select="funcGetCompanyDetail($item, $model, $label, $event)">

 

JS代码：

 

          //添加对模块的引用
　　　　　　var app = angular.module('appMain', ['ui.bootstrap']);

  
          //============动态获取候选公司列表、公司信息=============//
            $scope.funcGetCompanyList = function ($event) {
                var curElement = angular.element($event.target);
                console.log("inputChar：");
                console.log(curElement.val());
                //执行
                $http({
                    method: 'get',
                    url: "/HandlerApi.GetApiJson.Tclywork?ApiPath=Org/GetCompanyList&client_id=" + $rootScope.CurUserInfo.AppID,
                    params: { OrgName: curElement.val() },
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                })
                    .success(function (data, status, headers, config) {
                        if (data.code == 200) {
                            $scope.CompanyList = data.data;
                        }
                    })
                    .error(function (data, status, headers, config) {

                    });
            }
            //获取公司详细信息           
            $scope.funcGetCompanyDetail = function ($item, $model, $label, $event) {
                //var curElement = angular.element($event.target);
                console.log("selectItem：");
                console.log($item); //console.log($event);// console.log($model);// console.log($label);
                //执行
                $http({
                    method: 'get',
                    url: "/HandlerApi.GetApiJson.Tclywork?ApiPath=Org/Get&client_id=" + $rootScope.CurUserInfo.AppID,
                    params: { OrgName: $item },
                    headers: {  }
                })
                    .success(function (data, status, headers, config) {
                        if (data.code == 200) {
                            $scope.modelPosition.$$OrgEdge = data.data.OrgEdge ? data.data.OrgEdge.split(",") : [];//字符串转化成数组
                            $scope.modelPosition.OrgName = data.data.OrgInfo.OrgName;
                            $scope.modelPosition.Address = data.data.OrgInfo.Address;
                            $scope.modelPosition.OrgPro = data.data.OrgInfo.OrgPro;
                            $scope.modelPosition.Scale = data.data.OrgInfo.Scale;
                            $scope.modelPosition.OrgClass = data.data.OrgInfo.OrgClass;
                            $scope.modelPosition.WebSite = data.data.OrgInfo.WebSite;
                            $scope.modelPosition.OrgLevel = data.data.OrgInfo.OrgLevel;
                            $scope.modelPosition.OrgDesc = data.data.OrgInfo.OrgDesc;
                        }
                    })
                    .error(function (data, status, headers, config) {

                    });
            }