# js,根据input框内容实时搜索列表,并添加底色以突出显示
2016-08-03 14:13
543 查看
js,根据input框内容实时搜索列表,并添加底色以突出显示
js,根据input框内容实时搜索列表,纯前端,下面分三个部分进行展示:首先,让我们看一下做出来的效果:
1.html代码
2.js代码
3.css样式
1.html代码
<li> <label>名称:</label> <input type="text" id="selectByName" name="selectByName" value="" placeholder="请输入名称搜索......"/> <p> <a href="javascript:void(0);" class="selectCity-all">全部</a> <a href="javascript:void(0);" class="selectCity" value="xzz">小猪猪</a> <a href="javascript:void(0);" class="selectCity" value="glxq">咖喱小气</a> <a href="javascript:void(0);" class="selectCity" value="qtds">齐天大圣</a> <a href="javascript:void(0);" class="selectCity" value="mm">发抖的小喵咪</a> </p> </li>
2.js代码
//绑定搜索框搜索事件$(“body”).undelegate(“#selectByName”,”keyup”).delegate(“#selectByName”,”keyup”,function() {
var theName = $(this).val().replace(/\s+/g, ""); if (theName .length > 0) {//theName .length > 0 代表输入了theName值 //遍历要搜索的列表 $(this).next().find(".selectCity").each(function () { if ($(this).html().indexOf(theName) > -1) { //如果包含搜索内容,则添加底色样式 $(this).addClass("sousuo"); } else { $(this).removeClass("sousuo"); } }); }else {//否则 代表没输入theName值,全部去除底色 $(this).next().find(".selectCity").each(function () { $(this).removeClass("sousuo"); }); } });
3.css样式
.selectCity{//空样式,只用来标记行
}
.sousuo{
background-color: #1bffed;
}
“全部”功能这里先不说,以后有时间会再跟大家分享!
相关文章推荐
- 窗体上有两个文本框:一个文本框中最多输入字符6个;一个文本框中输入任何内容都显示*号。再添加一个按钮、2个单选按钮。实现单击按钮后,根据单选按钮,将对应文本框中内容显示在标签
- js实现在编辑框input下根据输入内容显示匹配内容的下拉列表(二)
- MFC中的combobox下拉列表添加了下拉项但是运行时不显示下拉列表内容。
- 根据select下拉框选择的值,向form表单添加所要显示的内容的方法
- ExpandableListView 根据输入的名称搜索对应的内容并展示,点击可打开二级列表
- js实现在编辑框input下根据输入内容显示匹配内容的下拉列表(一)
- 根据select不同的选项实现相应input框添加项的显示
- 关于在GridView模版里添加DropDownList实现根据下拉列表的不同选择gridview根据条件筛选显示。
- 仿Android联系人SideBar排序,根据拼音A-Z字母快速导航联系人姓名,以及输入搜索条件过滤,显示姓名的文字图片,添加挤压动画
- 存储里根据权限或其他内容来控制单价显示与否(惊险经历)
- 使用JavaScript以,号分割文本框内容为数组并添加到下拉列表
- 内容列表时候有预览,每次显示一个(1/2)
- 如何根据下拉列表框的值来给textarea或者其它容器动态的增加内容?
- QuickReport 报表根据字段值来显示不同内容
- 内容列表时候有预览,每次显示一个(2/2)
- 内容列表时候有预览,每次显示一个(1/2)
- Sharepoint 2007中可在列表中添加的内容类型
- 内容列表时候有预览,每次显示一个(2/2)
- 根据要显示的字段个数动态生成表格标签table及内容
- 根据一个表中的内容标记另一个表的显示内容