js实现文本框输入时同步出现模糊搜索列表

做项目的时候遇到类似于淘宝搜索【鞋】，出现【皮鞋】【运动鞋】这样的模糊搜索功能需求，效果如下：

下面是简单实现方式

html部分

<div class="fubao-serch"><div class="mui-input-row mui-search"><input type="search" id="selectzx" class="mui-input-clear" autocomplete="off" placeholder="搜索资讯"></div><div id="historybox"><ul id="fuzzylist"><!--<li><div class="bag-title">是吗是吗是吗是吗是吗是吗是吗</div></li>--></ul></div></div>

CSS部分

         /*搜索框样式*/.fubao-serch {margin: 10px 15px -15px 15px;border-radius: 25px;}//搜索列表框样式#historybox {width: 100%;position: absolute;top: 55px;left: 0;/* 隐藏 */display: none;font-size: 16px;margin-top: 10px;background-color: #F6F6F6;color: #353535;z-index: 900;}li {list-style: none;height: auto;line-height: 35px;width: 100%;margin-left: -20px;padding-top: 10px;}.bag-title {display: inline;width: auto;float: left;}

JS部分

//输入框正在输入时$("#selectzx").on('input', function() {if($('#selectzx').val() != "") {FuzzySearch($('#selectzx').val());$('#historybox').css('display', 'block');} else {$('#historybox').css('display', 'none');$('#selectzx').val() == "";}//点击X的时候关闭模糊搜索框$(document).one("click", function() {$('#historybox').css('display', 'none');});})

          //模糊搜索function FuzzySearch(_serchtext) {mui.Validation_Api("XXX/XXX/XXX", {  //调用后端接口"keyWord": _serchtext}, function(data) {if(data.respCode == "200") {var pn = document.getElementById("fuzzylist"),str = "";for(var i = 0; i < data.data.rows.length; i++) {str += '<li onclick=\'JacyWindow("FuBaoSouSuoDetil.html?word=' + _serchtext + '&type=0", "FuBaoSou", "福宝搜索")\'>';str += '<div class="bag-title">' + data.data.rows[i].nwsTitle.replace(eval(reg), "<span style='color: #015293;'>$&</span>") + '</div>';str += '</li>';}pn.innerHTML = str;} else {mui.toast("错误：" + data.message);}});}

js实现文本框输入时同步出现模糊搜索列表相关推荐

JS对文本框输入字符的限制
文本框Text或TestBox中对输入字符的限制,通过js事件来监控用户输入字符.然而,如果用户是通过Copy的方式来粘贴到文本中来,那这时候文本框的字符长度有可能超过,这时候就容易报错.这种Copy ...
php文本框限制字节,js限制文本框输入长度两种限制方式(长度、字节数)_基础知识...
功能/特点: 1.实时显示可输入的字数(字节数) 2.两种限制方式(长度.字节数) 3.中文输入法下可正常使用,无BUG 4.同一页面可以使用多个,相互不干扰 limit.js function li ...
auto js 实现文本框输入
1.利用 setText() 输入 // 利用setText 进行输入,重置输入 setText ([i], text) //返回是否输入成功.当找不到对应的文本框时返回false. // 不加参数i ...
html js文本框文字列出,js实现文本框中输入文字页面中div层同步获取文本框内容的方法...
这篇文章主要介绍了js实现文本框中输入文字页面中div层同步获取文本框内容的方法,实例分析了javascript操作dom元素的技巧,需要的朋友可以参考下本文实例讲述了js实现文本框中输入文字页面中 ...
js控制文本框仅仅能输入中文、英文、数字与指定特殊符号
JS 控制文本框仅仅能输入数字 <input οnkeyup="value=value.replace(/[^0-9]/g,'')"οnpaste="value=v ...
编写一程序，有2个文本框，在第一个文本框中输入一个整数，当焦点从第一个文本框离开时，第二个文本框将显示这个数的绝对值（使用FocusListener）。
编写一程序,有2个文本框,在第一个文本框中输入一个整数,当焦点从第一个文本框离开时,第二个文本框将显示这个数的绝对值(使用FocusListener). import javax.swing.*; i ...
【干货】JS 限制input文本框输入
JS 控制文本框只能输入数字 <input onkeyup="value=value.replace(/[^0-9]/g,'')" onpaste="value=v ...
JS 控制文本框只能输入中文、英文、数字与指定特殊符号（屏蔽表情输入）
onkeyup:释放键盘事件 onpaste:粘贴事件 oncontextmenu :鼠标右击事件控制这三种事件的输入 οnkeyup="this.value=this.value.rep ...
通过js获得input文本框输入的值
如何通过js获得input文本框输入的值. 前言我们编写的被载入浏览器的HTML页面都是一个 Document 对象.对于Document对象可以使我们通过代码(比如javascript)对HTML ...

js实现文本框输入时同步出现模糊搜索列表

js实现文本框输入时同步出现模糊搜索列表相关推荐

最新文章

热门文章