模仿百度搜索框，进行联想搜索

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>input自动补全</title><script type="text/javascript" src="js/jquery-1.4.4.min.js"></script></head><style>#searchForm {z-index: 999;position: absolute;top: 10px;text-align: center;margin: 0 auto;left: 0;right: 0;bottom: 0;}#query {width: 300px;font-size: 16px;height: 34px;line-height: 34px;box-sizing: border-box;outline: 1;border: 1px solid #d3d3d3;}#query:focus {border: 1px solid #2d78f4;}#search {width: 100px;height: 34px;color: #fff;font-family: arial;border: none;vertical-align: top;outline: none;background-color: #38f;}#search:hover {background-color: #2d78f4;cursor: pointer;}.auto {width: 300px;border: 1px solid #dedede;border-top: none;position: absolute;}.auto_out {width: 300px;height: 36px;line-height: 36px;padding-left: .5em;color: #000;background: #fff;overflow: hidden;white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;}.auto_out.on {background: #eee;cursor: pointer;}.hidden {display: none;}</style><body><div id="searchForm"><input id='query' type="text" class="auto-inp" onBlur="shijiao()"></input><button id="search">搜索一下</button><div class="auto hidden" id="auto"></div></div><script type="text/javascript" src="js/auto.js"></script><script>var array = ['七里香', 'b0', 'b12', 'b22', '固戍', 'b4', 'b5', 'b6', '如果爱', 'b7', 'b8', 'b2', 'abd', 'ab', '西乡', 'accd', 'abd', 'qq音乐', 'b1', 'cd', 'ccd', 'cbcv', '小王子', 'cxf', 'b0'];var autoComplete = new AutoComplete("query", "auto", array);document.getElementById("query").onkeyup = function(event) {autoComplete.start(event);}//模糊查询方法失焦事件function shijiao() {$("#auto").empty();};</script></body></html>

// 数组去重
Array.prototype.unique = function(){this.sort();var res = [];var json = {};for (var i = 0; i < this.length; i++) {if(!json[this[i]]){res.push(this[i]);json[this[i]] = 1;}}return res;
}// 对样式操作
var setClass = {hasClass: function(elements,cName){    // 判断是否含有某个classif(elements.className.match(new RegExp( "(\\s|^)" + cName + "(\\s|$)") ))return true;elsereturn false;},addClass: function(elements,cName){   // 添加classif( !this.hasClass( elements,cName ) ){ elements.className += " " + cName; };},removeClass: function(elements,cName){    // 移除某个classif( this.hasClass( elements,cName ) ){ elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " ); }}
}var Bind = function(This){return function(){This.init();}
}function AutoComplete(input,auto,arr) {this.obj = document.getElementById(input);this.autoObj = document.getElementById(auto);this.search_value = ""; //当前的搜索输入值this.index = -1;     //当前选中的DIV的索引this.value_arr = arr; //数据库中供检索的值 不包含重复值
}
AutoComplete.prototype = {// 初始化init: function(){var This = this;setClass.removeClass(This.autoObj,"hidden");this.autoObj.style.left = this.obj.offsetLeft + "px";this.autoObj.style.top = this.obj.offsetTop + this.obj.offsetHeight + "px";},//删除自动完成需要的所有DIVdeleteDIV: function(){while(this.autoObj.hasChildNodes()){this.autoObj.removeChild(this.autoObj.firstChild);}setClass.addClass(this.autoObj,"hidden");},autoOnmouseover: function(index){if(index != this.index){setClass.addClass(this.autoObj.children[index],"on");setClass.removeClass(this.autoObj.children[this.index],"on");this.index = index;}},setValue: function(This){return function(){This.obj.value = this.seq;setClass.addClass(This.autoObj,"hidden");}},// 响应键盘pressKey: function(event){var code = event.keyCode;var length = this.autoObj.children.length;if(code == 38){        //↑setClass.removeClass(this.autoObj.children[this.index],"on");this.index--;if(this.index < 0){this.index = length - 1;}setClass.addClass(this.autoObj.children[this.index],"on");this.obj.value = this.autoObj.children[this.index].seq;}else if(code == 40){  //↓setClass.removeClass(this.autoObj.children[this.index],"on");this.index++;if(this.index > length-1){this.index = 0;}setClass.addClass(this.autoObj.children[this.index],"on");this.obj.value = this.autoObj.children[this.index].seq;}else{           //回车this.obj.value = this.autoObj.children[this.index].seq;setClass.addClass(this.autoObj,"hidden");this.index = -1;}},// 程序入口start: function(event){event = event || window.event;var code = event.keyCode;var This = this;if(code != 13 && code != 38 && code != 40){this.init();this.deleteDIV();this.search_value = this.obj.value;var valueArr = this.value_arr.unique();//去掉前后空格不能为空if(this.obj.value.replace(/(^\s*)|(\s*$)/g,"") == ""){ return;}//判断数组中是否含有输入的关键字try{var reg = new RegExp("("+ this.obj.value +")","i");    //输入"aaa" 则 reg = /(aaa)/i}catch(e){alert(e.message); }var div_index = 0;   //记录匹配索引个数for (var i = 0; i < valueArr.length; i++) {if(reg.test(valueArr[i])){var div = document.createElement("div");div.className = "auto_out";div.seq = valueArr[i];div.index = div_index;div.innerHTML = valueArr[i].replace(reg,"<strong>$1</strong>");this.autoObj.appendChild(div);setClass.removeClass(this.autoObj,"hidden");div_index++;if(div_index == 1) {setClass.addClass(this.autoObj.firstChild,"on");this.index = 0;}div.onmouseover = function(){This.autoOnmouseover(this.index);}div.onclick = this.setValue(This);}}}else{this.pressKey(event);}window.onresize = Bind(This);}
}

模仿百度搜索框，进行联想搜索相关推荐

百度搜索的一个联想搜索框是如何实现的利用AJAX实现
实现类似于百度搜索的一个联想搜索框效果图考虑实现的步骤 1.创建相应的数据库并且存储数据 2.测试一下数据传输回来得搜索结果 3.模拟搜索页面 4.导入需要用到的JAR包和配置文件 5.在网页为输 ...
百度搜索结果的URL参数搜索框提示词搜索方式(rsv_sug2)
通过百度搜索框提示,看到可能想找的关键词之后,百度提供了2种方式供选择,并且用参数 rsv_sug2 记录了用户的选择. 百度搜索结果网址参数搜索框提示词搜索方式(rsv_sug2) 名称 rsv_ ...
百度搜索引擎结果网址参数搜索框提示词搜索方式(rsv_sug2)
通过百度搜索框提示,看到可能想找的关键词之后,百度提供了2种方式供选择,并且用参数 rsv_sug2 记录了用户的选择. [b]百度搜索结果网址参数搜索框提示词搜索方式(rsv_sug2)[/b] ...
百度搜索结果页面的参数搜索框提示词搜索方式(rsv_sug2)
通过百度搜索框提示,看到可能想找的关键词之后,百度提供了2种方式供选择,并且用参数 rsv_sug2 记录了用户的选择. 百度搜索结果网址参数搜索框提示词搜索方式(rsv_sug2) 名称 rsv_ ...
如何清除搜索框内的搜索历史记录？
如何清除搜索框内的搜索历史记录? 答:这是网页浏览器的一项功能.进入IE浏览器的相关菜单选项设置: ·如果您使用IE4.0浏览器,则由"查看→internet选项→内容→自动完成→清除表单→ ...
搜索图标在搜索框内的搜索框的编写（宛如绕口令一般的标题）
以模仿微博顶部搜索框为例: <div style="height: 28px;width: 468px;"><input type="text" ...
直播网站程序源码，搜索框实现快速搜索功能
直播网站程序源码,搜索框实现快速搜索功能 module.exports = async function (params, context) {const db = context.databasec ...
android特效集锦系列之八仿快播搜索框悬浮文字搜索
1. 仿快播搜索框悬浮文字搜索,我很无耻的把别人的成果直接拿了过来(大神饶了我吧,真是没有记作者名字的习惯), 效果: 一张图???为什么跟之前的文风不一样啊??别吐槽了,洗洗睡吧. 源码
fastadmin 快捷搜索修改默认字段多个字段 //菜单搜索框，默认搜索是id，想改成默认订单号
fastadmin thinkphp的框架下的集成基础框架快捷搜索修改默认字段多个字段 //菜单搜索框,默认搜索是id,想改成默认订单号 protected $searchFields = 'bu ...
模拟百度搜索框自动联想功能，原生js+jsonp轻松搞定
链接下面是我闲暇时总结的JS.CSS.算法总结,欢迎大家点赞.star-- 有趣实用的CSS效果前端博客传送门 LeetCode个人题解传送门讲解如何利用百度接口仿写一个搜索联想词功能效果 ...

模仿百度搜索框，进行联想搜索

模仿百度搜索框，进行联想搜索相关推荐

最新文章

热门文章