基于angularjs的下拉模糊搜索框实现

前端之家收集整理的这篇文章主要介绍了基于angularjs的下拉模糊搜索框实现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

效果如下:

废话不多说,看代码

<!DOCTYPE html>
<html ng-app="myApp">

	<head>
		<Meta charset="UTF-8">
		<title>下拉搜索</title>
		<script data-require="angular.js@1.2.25" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script>
		<style type="text/css">
			.wapper {
				width: 600px;
				height: 500px;
				background-color: #FFFFFF;
				padding: 30px;
				margin: 0 auto;
			}
			
			.select-wapper {
				margin: 0 auto;
				width: 200px;
				height: 30px;
				position: relative;
			}
			
			.select-wapper>input {
				width: 100%;
			    height: 100%;
			    border: 1px solid #CCCCCC;
			    padding: 0 10px 0 0;
			    Box-sizing: border-Box;
			    border-radius: 4px;
			    padding: 5px;
			    -webkit-Box-shadow: inset 0 1px 1px rgba(0,.075);
			    Box-shadow: inset 0 1px 1px rgba(0,.075);
			    -webkit-transition: border-color ease-in-out .15s,-webkit-Box-shadow ease-in-out .15s;
			    -o-transition: border-color ease-in-out .15s,Box-shadow ease-in-out .15s;
			    transition: border-color ease-in-out .15s,Box-shadow ease-in-out .15s;
			}
			.select-wapper>input:focus {
				border: 1px solid rgb(102,175,233);
				-webkit-Box-shadow: inset 0 1px 1px rgba(102,233,.075);
			    Box-shadow: inset 0 1px 1px rgba(122,156,211,.075);
			    outline: none;
			}
			
			.select-wapper:after {
				content: '';
			    width: 0;
			    height: 0;
			    border-top: 8px solid #77705d;
			    border-right: 5px solid transparent;
			    border-left: 5px solid transparent;
			    display: inline;
			    position: absolute;
			    right: 8px;
			    top: 11px;
			}
			
			.select-wapper .select-content-panel {
				width: 100%;
				height: auto;
				max-height: 300px;
				position: absolute;
				top: 100%;
				left: 0;
				border: 1px solid rgb(122,211);
				margin-top: 0;
				padding: 0;
				overflow-y: auto;
				Box-sizing: border-Box;
				background-color: white;
			}
			
			.select-wapper .select-content-panel li {
				display: block;
				list-style: none;
				padding: 2px 10px;
				font-size: 14px;
				border: 0 !important;
			}
			
			.select-wapper .select-content-panel li:hover {
				background-color: rgb(30,144,255);
				color: white !important;
			}
			
			.select-wapper .select-content-panel li:active {
				background-color: rgb(30,255);
				color: white !important;
			}
			.select-wapper .item-bg {
				background-color: rgb(30,255);
				color: white !important;
			}
			.select-wapper .hidden-cls {
				display: none;
			}
		</style>

	</head>

	<body ng-controller="mainCtrl">
		<div class="wapper">
			<div class="select-wapper">
				<input type="text" ng-model="inValue_display" id="select-input-mark"  placeholder="请选择" input-search/>
				<ul class="select-content-panel hidden-cls" input-select>
					<li ng-repeat="item in dataList" ng-bind="item.name"></li>
				</ul>
			</div>
		</div>

		<script type="text/javascript">
			angular.module('myApp',[])
				.controller('mainCtrl',['$scope',function ($scope) {
					$scope.inValue = '';
					$scope.inValue_display = '';
					
					$scope.dataList = [{
						name: '二哈1号'
					},{
						name: '二哈2号'
					},{
						name: '二哈3号'
					},{
						name: '二哈4号'
					},{
						name: '二哈5号'
					},{
						name: '二哈6号'
					},{
						name: '二哈7号'
					},{
						name: '二哈8号'
					},{
						name: '二哈9号'
					},{
						name: '二哈10号'
					},{
						name: '二哈11号'
					},{
						name: '二哈12号'
					},{
						name: '二哈13号'
					},{
						name: '二哈14号'
					},{
						name: '二哈15号'
					},{
						name: '二哈16号'
					},{
						name: '二哈17号'
					},{
						name: '二哈18号'
					},{
						name: '二哈19号'
					},{
						name: '二哈20号'
					},{
						name: '二哈21号'
					},{
						name: '二哈22号'
					},{
						name: '二哈23号'
					},{
						name: '二哈24号'
					},{
						name: '二哈25号'
					},{
						name: '二哈26号'
					}]
					$scope.initList = $scope.dataList;
					
					$scope.$on('selectInput',function(evt,inputObj){
						if('select-input-mark' == inputObj.inputId){
							$scope.inValue = '';
							$scope.inValue_display = inputObj.inputText;
							$scope.fuzzyQuery();
						}
					});
					
					$scope.fuzzyQuery = function(){
						$scope.dataList = [];
						angular.forEach($scope.initList,function(item){
							if(-1 != item.name.indexOf($scope.inValue_display)){
								$scope.dataList.push(item);
							}
						})
					}
			    }])
				.directive('inputSelect',function() {
					return {
						link: function(scope,element,attr) {
							element.on('click',function(evt) {
								evt.target.parentElement.prevIoUsElementSibling.value = evt.target.textContent;
								scope.inValue = evt.target.textContent;
								if(evt.target.parentElement.getElementsByClassName('item-bg').length){
									angular.element(evt.target.parentElement.getElementsByClassName('item-bg')[0]).removeClass('item-bg');
								}
								angular.element(evt.target).addClass('item-bg');
								angular.element(evt.target.parentElement).addClass('hidden-cls');
								return true;
							});
						}
					};
				})
				.directive('inputSearch',attr) {
							var isFocus = true;
							var isOver = false;
							element.on('focus',function(){
								angular.element(this.nextElementSibling).removeClass('hidden-cls');
							})
							element.on('keydown',function(evt){
								if(!this.nextElementSibling.children.length){
									return false;
								}
								if(isFocus){
									var currentLi = this.parentElement.getElementsByClassName('item-bg')[0];
									if(38 == evt.keyCode && currentLi && currentLi.prevIoUsElementSibling){//向上
										var currentLi = this.parentElement.getElementsByClassName('item-bg')[0],liHeight = currentLi ? currentLi.clientHeight : '',offTop = liHeight;
										angular.element(currentLi).removeClass('item-bg');
										angular.element(currentLi.prevIoUsElementSibling).addClass('item-bg');
										
										for(var i = 0,len = this.nextElementSibling.children.length; i < len; i++){
											if(this.nextElementSibling.children[i] == currentLi){
												break;
											}
											offTop = offTop + liHeight;
										}
										offTop = Math.max(0,offTop - 2 * liHeight);
										if(this.nextElementSibling.scrollTop > offTop){
											this.nextElementSibling.scrollTop = offTop;
										}
									}else if(40 == evt.keyCode){//向下
										var currentLi = this.parentElement.getElementsByClassName('item-bg')[0],offTop = liHeight;
										if(!currentLi){
											angular.element(this.nextElementSibling.firstElementChild).addClass('item-bg');
											return true;
										}
										if(currentLi.nextElementSibling){
											angular.element(currentLi).removeClass('item-bg');
											angular.element(currentLi.nextElementSibling).addClass('item-bg');
										}
										
										for(var i = 0,len = this.nextElementSibling.children.length; i < len; i++){
											if(this.nextElementSibling.children[i] == currentLi){
												break;
											}
											offTop = offTop + liHeight;
										}
										if(this.nextElementSibling.scrollTop > offTop){
											return false;
										}
										if(this.nextElementSibling.clientHeight < offTop && this.nextElementSibling.scrollTop + this.nextElementSibling.clientHeight - liHeight < offTop){
											this.nextElementSibling.scrollTop = offTop - this.nextElementSibling.clientHeight + liHeight;
										}
										
									}else if(13 == evt.keyCode && currentLi){
										var isHidden = angular.element(evt.target.nextElementSibling).hasClass('hidden-cls');
										if(isHidden){
											angular.element(evt.target.nextElementSibling).removeClass('hidden-cls');
										}else{
											evt.target.value = currentLi.innerText;
											angular.element(currentLi.parentElement).addClass('hidden-cls');
											scope.inValue = evt.target.value;
										}
									}
								}
							})
							element.on('input',function(evt){
				            	if(angular.element(this.nextElementSibling).hasClass('hidden-cls')){
				            		angular.element(this.nextElementSibling).removeClass('hidden-cls')
				            	}
				            	if(this.nextElementSibling.children.length){
									angular.element(this.nextElementSibling.getElementsByClassName('item-bg')[0]).removeClass('item-bg');
									angular.element(this.nextElementSibling.children[0]).addClass('item-bg');
								}
				            	scope.$emit('selectInput',{
				            		inputId: evt.target.id,inputText: evt.target.value
				            	});
				            });
				            angular.element(element[0].nextElementSibling).on('mousemove',function(){
				            	isOver = true;
				            })
				            angular.element(element[0].nextElementSibling).on('mouseleave',function(){
				            	isOver = false;
				            })
				            element.on('blur',function(evt){
				            	if(!isOver){
				            		angular.element(this.nextElementSibling).addClass('hidden-cls');
				            	}
				            });
						}
					};
				})
		</script>
	</body>

</html>
原文链接:https://www.f2er.com/angularjs/145700.html

猜你在找的Angularjs相关文章