<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularJs下拉搜索框</title> <script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.min.js"></script> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <style> input,select{ width: 120px; } </style> </head> <body> <div ng-app="app" ng-controller="indexCtrl"> <input type="text" ng-change="searchTextValueChange(searchTextValue)" ng-model="searchTextValue" ng-click="searchTextInputClick()"> <div ng-show="showSelect"> <select ng-model="selectValues" multiple> <option ng-repeat="data in selectData" ng-click="selectOptionClick(data)">{{data}}</option> </select> </div> </div> <script> var app = angular.module("app",[]); app.controller("indexCtrl", function ($scope) { $scope.selectData = ["王小明","李晓红","长着长着","你是狗么","别问，问就幸福","今天又被幸福了","快乐快乐","蛇皮狗"]; //下拉框中的数值拷贝一份 $scope.copySelectData = $scope.selectData; //是否显示下拉框 $scope.showSelect = false; //文本框值 $scope.searchTextValue = ""; $scope.selectValues = []; /** * 将下拉选的数据值赋值给文本框，并且隐藏下拉框 */ $scope.selectOptionClick = function (selectValue) { //因为加了多选属性防止多选点击置空数组再加数据 //不加multiple多选属性不现实下拉范围 $scope.selectValues = []; $scope.selectValues.push(selectValue); $scope.showSelect = false; //下拉框隐藏 $scope.searchTextValue = $scope.selectValues[0]; //文本框中的值 }; /** * 获取的数据值与下拉选逐个比较，如果包含则放在临时变量副本，并用临时变量副本替换下拉选原先的数值，如果数据为空或找不到，就用初始下拉选项副本替换 */ $scope.searchTextValueChange = function (searchTextValue) { if(searchTextValue === "" || searchTextValue === undefined){ $scope.selectData = $scope.copySelectData; return; } //正则匹配，不是中文不筛选数据 if(new RegExp("[^\u4E00-\u9FA5]+").test(searchTextValue)){ return; } var newData = []; //创建一个临时下拉框副本 angular.forEach($scope.selectData, function (data) { if (data.indexOf(searchTextValue)>=0){ newData.push(data); } }); $scope.selectData = newData; //newData中的数值赋值给$scope.selectData }; /** * 搜索输入框点击事件 */ $scope.searchTextInputClick = function () { if($scope.selectData.length>1){ $scope.showSelect = true; } }; }) </script> </body> </html>