jQuery自动补全筛选input特效代码下载

jQuery自动补全筛选input特效代码下载

1. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>

2. HTML代码

<div class="choose-screening">
	<form action="" method="post">
		<div class="choose-screening-input">
			<input name="searchCity" type="text" id="chooseCity" placeholder="输入城市查询">
			<div class="auto-screening auto-hidden" id="autoScreening">
			</div>
		</div>				
		<div class="mar0-20">
			<button id="informationBtn" type="button" class="mui-btn mui-btn-block mui-btn-primary improve-information-btn">确认</button>
		</div>
	</form>
</div>
<script>
	$("#chooseCity").bind('input propertychange',function(){
		/*这个是全部数据的数组*/
		var arr = ['七里香','站长素材','HTML5特效','sc.chinaz.com','jQuery特效','你在哪','去哪啊', 47, 7, 63, 8, 6, 9, 1,37,37,35,34,36,3,38,53,62,63,53,43,23,32,13,03];
		/*这个数组我是防止出现重复的数据进行数据去重复后的新数组*/
		var arrNew = [];
		var i;
		for(i=0;i<arr.length;i++){
			var arrItems=arr[i];
		    /*判断元素是否存在于arrNew中,如果不存在则插入到arrNew的最后*/
		    if($.inArray(arrItems,arrNew)==-1) {
		        arrNew.push(arrItems);
				/*console.log(arrNew);*/													
			}
		}
		/*这是将input中输入的数据有关联的全部加入新生成的div中显示出来*/
		for(i=0;i<arrNew.length;i++){
			var arrWord = arrNew[i].toString();
			/*console.log(arrWord);*/
			if(((arrWord.indexOf($('#chooseCity').val())) > -1) && ($('#chooseCity').val().length > 0)){
				var addArrWord = "<div class=auto-screening-prompt>" + arrWord + "</div>";
				$("#autoScreening").append(addArrWord);
				$("#autoScreening").removeClass("auto-hidden");
			}
		}
		/*将显示出来的div的内容去重复,input内容变动时去重复*/
		$(".auto-screening-prompt").each(function(){
			if($(this).text().indexOf($('#chooseCity').val()) < 0){
				$(this).remove();
			}
			else if($('#chooseCity').val().length == 0){
				$("#autoScreening").addClass("auto-hidden");
				$(".auto-screening-prompt").remove();
			}
		});	
		/*弹出的提示div去重复*/
		$(".auto-screening-prompt").each(function(i, iText){
			var iTextHtml = iText.innerHTML;
			$(".auto-screening-prompt").each(function(j, jText){
				var jTextHtml = jText.innerHTML;
				if (i < j && iTextHtml == jTextHtml) {
					$(this).remove();
				}
			});
		});    
		/*点击div获取文本传值*/
		$(".auto-screening-prompt").on("click",function(){
			$("#chooseCity").val($(this).text());
			$("#autoScreening").addClass("auto-hidden");
			$(".auto-screening-prompt").remove();
		})				
	})
</script>
<script>
	/*确认搜索按钮的ajax提交*/
	$("#informationBtn").on("click",function(){		
		$.ajax({
			type: 'post',
			url: '',
			dataType:'json',
			data: $("form").serialize(),
			success: function(data) {
				if(data.code == 1){
				}else{
					return false;
				}
			}
		});
	});     
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

加群请备注:从官网了解到