模仿百度搜索自动匹配

最新推荐文章于 2022-03-18 21:31:02 发布

Scarlett_2017

最新推荐文章于 2022-03-18 21:31:02 发布

阅读量1.1k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_24794717/article/details/80407290

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图：

模仿百度搜索，实现输入框自动匹配，思路如下

（1）首先为输入框绑定keyup事件，当键盘按键弹起时触发

（2）判断键盘按键：

如果是回车键，则判断输入框内容是否为空，若为空，则提示“请输入搜索内容”，如果不为空，则直接进行搜索；

如果是上下翻页键，判断匹配结果是否已经显示，如果已经显示，并且当前还能继续移动（比如，当前高亮显示的某个匹配结果已经是第一个了，肯定不能再向上移动了。。。。），则向上或者向下高亮显示；

如果是其他键，并且输入框内容不为空，这种情况下就要进行等待一秒，如果用户一秒钟不改变输入内容，则进行自动匹配并显示匹配结果，对于匹配结果，需要绑定每个匹配内容的onclick、onmouseover、onmouseout事件，实现点击匹配结果进行查询和鼠标经过匹配结果的样式改变（这里需要注意的就是，当通过鼠标选择到了第三个匹配结果，该结果高亮显示，此时如果继续用上下键选择，也是从第三个结果开始移动的！也就是两者共享选择状态的）；

代码如下：

首先是html代码（样式可以随便改，，，）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>查询</title>
    <style>
      #auto {
        width: 170px;
        position: absolute;
        display: none;
        border:1.2px solid #00618B;
        border-radius: 6px;
        background-color: #000d16;
  
      }
      .auto_out {
        cursor: pointer;
        height: 25px;
        line-height: 25px;
        font-size: 0.8rem;
        padding-left: .5em;
        color: white;
        background: #fff;
        overflow: hidden;
        white-space: nowrap;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        background-color: #000d16;
        border-radius: 6px;
      }
    </style>
  </head>
  <body>
    <div>
      <input id="searchinput" type="text" placeholder="请输入姓名" />
      <div id="auto"></div>
    </div>
    
  </body>
<script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="pipei.js"></script>
</html>

然后是js文件，请求数据可以用ajax，我这里用了默认值

$(document).ready(function() {
	//展示匹配结果
	function AutoComplete(searchinput, auto) {
		This = this;
		This.obj = $("#" + searchinput); //当前的搜索框
		This.autoObj = $("#" + auto); //当前的搜索匹配框
		This.search_value = ""; //当前的搜索输入值
		This.index = -1; //当前搜索匹配框中选中的索引

		This.start = function(event) { //函数入口
			//获取输入值
			This.search_value = This.obj.val();
			//获取按下的按键
			event = event || window.event;
			var code = event.keyCode;
			//按下回车键开始查询
			if(code == 13) {
				if(This.search_value == "") //当内容为空或者没有匹配元素不能查询
					alert("请输入查询内容！");
				else {
					alert("开始查询！");
					This.restart();
				}
			}
			//向上键
			else if(code == 38) {
				if(This.autoObj.css("display") == "block" && This.index != -1 && This.index != 0) {
					This.index -= 1;
					This.updown("up");
				}
			}
			//向下键
			else if(code == 40) {
				if(This.autoObj.css("display") == "block" && This.index < This.div_index - 1) {
					This.index += 1;
					This.updown("down");
				}
			}
			//其他情况，当用户1s为继续虚入，则进行匹配
			else if(This.search_value != "") {
				clearTimeout(timeoutId);
				timeoutId = setTimeout(function() {
					var matchArr = []; //保存匹配结果
					var url = 'eventRecvPersons/getLogCountAndExCount';//数据请求接口
					matchArr = ['b7', 'b8', 'b2', 'abd', 'ab', 'acd', 'accd', 'abd', 'qq音乐', 'b1']; //默认数据
					var fn = function(data) {
						
					}
					//	ajaxJson(url, fn, search_value, 'post');这里可以写ajax请求数据！！！
					console.info("do load matching data list");
					//删除上次匹配的内容
					if(This.autoObj.children()) {
						This.autoObj.children().remove();
					}
					//重置参数
					This.reset();
					This.div_index = 0; //记录匹配结果的个数
					//填充
					for(var i = 0; i < matchArr.length; i++) {
						var div = document.createElement("div");
						div.className = "auto_out";
						div.innerHTML = matchArr[i];
						This.autoObj.append(div);
						This.div_index++;
						if(This.div_index == 1) {
							//显示匹配结果div
							This.autoObj.css("display", "block");

						}
						//绑定点击事件
						div.onclick = function() {
							$("#searchinput").val(this.innerText);
							//隐藏匹配结果div
							This.autoObj.css("display", "none");
							//开始查询
							alert("开始查询");
							This.restart();
						};
						div.onmouseover = function() {
							This.autoObj.children().css("background-color", "#000d16");
							$(this).css("backgroundColor", "#0089C3");
							This.index = $(this).index(); //当前选中的DIV的索引
						}
						div.onmouseout = function() {
							$(this).css("backgroundColor", "#000d16");

						}
					}
				}, 1000);

			} else {
				//隐藏匹配结果div
				clearTimeout(timeoutId);
				This.autoObj.css("display", "none");
			}

		};
		//重置参数
		This.reset = function() {
			This.index = -1;
		//	This.obj.scrollTop(0);
		};
		//隐藏搜索结果，重置参数
		This.restart = function() {
			This.index = -1;
		//	This.obj.scrollTop(0);
			This.autoObj.css("display", "none");
		};
		This.updown = function(updown) {
			This.autoObj.children().css("background-color", "#000d16");
			This.autoObj.children().eq(this.index).css("background-color", "#0089C3");
			This.obj.val(this.autoObj.children().eq(this.index).html()); //填充值
			//计算要选定元素的位置，如果不在视域范围内，则改变（针对匹配结果过长产生滚动的情况）
			//			var topdiatance = this.autoObj.scrollTop();
			//			if(this.index * 36 >= topdiatance && this.index * 36 + 36 <= topdiatance + 180) {
			//
			//			} else {
			//				(updown == "up") ? this.autoObj.scrollTop(topdiatance - 36): this.autoObj.scrollTop(topdiatance + 36);
			//			}
		}
	};

	var timeoutId = 0;
	//调用构造函数
	var autoComplete = new AutoComplete("searchinput", "auto");
	
	//搜索框自动匹配
	$("#searchinput").keyup(function(event) {
		autoComplete.start(event);
	})
})