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

                    });
            }