AngularJs常用模糊搜索插件实例

1、AngularJs的UI组件——Typeahead

可下拉中选择，也可手动输入

引入

html

	
	
	

		 暂无数据
	

js

获取搜索结果数据

$scope.getTelInfo = function(val){
			$scope.isNamedisable = false;
			$scope.contactData.user_name = '';
			$scope.contactData.user_id = '';
			return $http.get($window.platformServer + 'business_miniprograms/mis/user/search_user',
				{params:{
					"accesstoken" : $scope.accesstoken,
					"telephone" : val
				}}).then(function(res){
					return res.data.data;
				}
			)
		}

选中事件

$scope.onSelect = function(arg1) {
			//$scope.contactData.telephone = arg1.telephone;
			console.log(arg1)
			//对选中的数据进行处理
		};

没有数据的情况

$scope.hideNoResults = function(index) {
			$scope.noResults = false;
		};

2、AngularJs的下拉插件——ui-select

只能从下拉中选择，不可自己输入

html:

						
							{{$select.selected.title}}
							
								
{{item.title}}
								
							
						
					

js

获取搜索结果：这里需要做个判断，当input输入为空的时候return,否则初始的时候会报错

$scope.getBusinessInfo = function(val){
			if (!val || !val.search) {
				return;
			}
			return $http.get($window.platformServer + 'business_miniprograms/mis/business/search_by_name',
				{params:{
					"title" : val.search
				}}).then(function(res){
					$scope.businessList = res.data.data;
				}
			)
		}

选中事件

$scope.onSelectA = function(arg1) {
			console.log(arg1)
			//数据处理
		};