AngularJs常用模糊搜索插件实例

1、AngularJs的UI组件——Typeahead
可下拉中选择,也可手动输入
引入

html

<div>
	<input type="text" ng-model="contactData.telephone" typeahead="contactData.telephone for contactData in 		getTelInfo($viewValue)" class="form-control" typeahead-loading="loadingLocations" typeahead-no-results="noResults" typeahead-on-select="onSelect($item)" typeahead-wait-ms="500" placeholder="请输入手机号搜索">
	<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh p-a" style="top:35px;"></i>
	<div ng-show="noResults" ng-click="hideNoResults()">
		<i class="glyphicon glyphicon-remove"></i> 暂无数据
	</div>
</div>
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:

<div class="col-sm-7">
						<ui-select ng-model="selectBusiness" theme="bootstrap" style="display: inline-block;" class="w-xl" on-select="onSelectA($item)">
							<ui-select-match placeholder="请选择...">{{$select.selected.title}}</ui-select-match>
							<ui-select-choices refresh="getBusinessInfo($select)" refresh-delay="300" repeat="item in businessList | filter: $select.search">
								<div>{{item.title}}
								</div>
							</ui-select-choices>
						</ui-select>
					</div>
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)
			//数据处理
		};



展开阅读全文

没有更多推荐了,返回首页