2023年7月9日发(作者：)

智能搜索框html代码,js实现搜索框关键字智能匹配代码只要使⽤搜索引擎的朋友应该都有这样的体会，就是当在搜索框输⼊关键字的时候，会出现⾃能匹配现象，这绝对是⾮常好的⽤户体验，下⾯就是⼀段类似的代码，当然这⾥只是掩饰，所以只能匹配的数据都是本地固定好的，在实际应⽤中可以才能够数据库读取数据。效果图：代码实例如下:搜索框关键字智能匹配实例代码body, ul, li{margin:0;padding:0;}body{font-size:12px;font-family:sumsun, arial;background:#FFFFFF;}.gover_search{position:relative;z-index:99;height:63px;padding:15px 0 0 20px;border:1px solid #b8cfe6;border-bottom:0;background:url(../images/gover_search_) repeat-x 0 0;}.gover_search_form {height:36px;}.gover_search .search_t{float:left;width:112px;line-height:26px;color:#666;}.gover_search .input_search_key{float:left;width:462px;height:18px;padding:3px;margin-right:5px;border:1px solid #ccc;line-height:18px;background:#fff;}.gover_search .search_btn{float:left;width:68px;height:26px;overflow:hidden;border:1px solid #ccc;text-align:center;color:#ff3300;letter-spacing:5px;background:url(../images/gover_search_) no-repeat 0 -79px;cursor:pointer;font-weight:bold;}.gover_search .search_suggest{position:absolute;z-index:999;left:132px;top:41px;width:468px;border:1px solid #ccc;border-top:none;display:none;color:#004080;}.gover_search .search_suggest li{height:24px;overflow:hidden;padding-left:3px;line-height:24px;background:#fff;cursor:default;}.gover_search .search_suggest {background:#ddd;}.num_right{float:right;text-align:right;line-height:24px;padding-right:10px}关键词匹配搜索搜索function oSearchSuggest(searchFuc){var input = $('#gover_search_key');var suggestWrap = $('#gov_search_suggest');var key = "";var init = function(){('keyup',sendKeyWord);('blur',function(){setTimeout(hideSuggest,100);})}var hideSuggest = function(){();}//发送请求，根据关键字到后台查询var sendKeyWord = function(event){//键盘选择下拉项if(('display')=='block'&&e == 38||e == 40){var current = ('');if(e == 38){if(>0){var prevLi = Class('hover').prev();if(>0){ss('hover');(());}}else{var last = ('li:last');ss('hover');(());}}else if(e == 40){if(>0){var nextLi = Class('hover').next();if(>0){ss('hover');(());}}else{var first = ('li:first');ss('hover');(());}}//输⼊字符}else{var valText = $.trim(());if(valText ==''||valText==key){return;}searchFuc(valText);key = valText;}}//请求返回后，执⾏数据展⽰splay = function(data){if(<=0){();return;}//往搜索框下拉建议显⽰栏中添加条⽬并显⽰var li;var tmpFrag = DocumentFragment();('ul').html('');for(var i=0; i{li = Element('LI');TML = data[i];Child(li);}('ul').append(tmpFrag);();//为下拉选项绑定⿏标事件('li').hover(function(){('li').removeClass('hover');$(this).addClass('hover');},function(){$(this).removeClass('hover');}).bind('click',function(){$(this).find("span").remove();(TML);();});}init();};//实例化输⼊提⽰的JS,参数为进⾏查询操作时要调⽤的函数名var searchSuggest = new oSearchSuggest(sendKeyWordToBack);//这是⼀个模似函数，实现向后台发送ajax查询请求，并返回⼀个查询结果数据，传递给前台的JS,再由前台JS来展⽰数据。本函数由程序员进⾏修改实现查询的请求//参数为⼀个字符串，是搜索输⼊框中当前的内容function sendKeyWordToBack(keyword){var aData = [];('约100个'+keyword+'返回数据1');('约200个'+keyword+'返回数据2');('约100个'+keyword+'返回数据3');('约50000个'+keyword+'返回数据4');('约1044个'+keyword+'2012是真的');('约100个'+keyword+'2012是假的');('约100个'+keyword+'2012是真的');('约100个'+keyword+'2012是假的');//将返回的数据传递给实现搜索输⼊框的输⼊提⽰js类splay(aData);}更多关于搜索功能的⽂章请查看专题《JavaScript搜索功能汇总》希望本⽂所述对⼤家学习javascript程序设计有所帮助。