js jquery搜索下拉框 自动选中 搜索到结尾处从头搜索
2016-10-08 15:37
239 查看
html:
JS:
效果:
![](http://img.blog.csdn.net/20161008154016438)
<span style="font-size:14px;"><span class="select-box" style="width:150px;"> <select class="select" id="brand_id" name="brand_id" size="1" > <option value="0" selected>- - -请选择- - -</option> <option value="16">万利达/malata</option> <option value="17">现代/HYUNDAI</option> <option value="18">E人E本</option> <option value="19">海信/Hisense</option> <option value="20">喜之郎/STRONG</option> <option value="21">阿尔卑斯/Alpenliebe</option> <option value="22">春光/chun guang</option> <option value="23">潘高寿</option> <option value="24">皇冠/Danisa</option> <option value="25">波力/PO-LI</option> <option value="26">张二嘎</option> <option value="27">怡达/yida</option> <option value="28">母亲</option> <option value="29">品客/Pringles</option> <option value="30">乐事/Lay s</option> <option value="31">多力多滋/Doritos</option> <option value="32">康师傅/Master Kong</option> <option value="33">百味林</option> <option value="34">绿帝/green king</option> <option value="35">上好佳/Oishi</option> <option value="36">立丰/lifefun</option> <option value="37">华味亨</option> <option value="38">桂格/QUAKER</option> <option value="39">卡夫/KRAFT</option> <option value="40">维维</option> </select> </span> <input type="text" name="search" id="searchText" onkeyup="" placeholder="品牌名称" style="width:150px" class="input-text"> <button name="" id="btn_search" class="btn btn-success" type="button" onclick="searchs()" ><i class="Hui-iconfont"></i> 搜品牌名称</button></span>
JS:
var lastSerachIndex =new Array(); lastSerachIndex.push(-1); var lastSearchStr=''; function searchs(){ var searchText=$("#searchText").val(); if(searchText==''){return;} var isfind = false; if(searchText!=lastSearchStr){ lastSerachIndex.push(-1); } $("#brand_id option").each(function(index) { if($(this).text().indexOf(searchText)>-1&&isfind==false&&$.inArray(index,lastSerachIndex)<0){ lastSerachIndex.push(index); lastSearchStr=searchText; isfind=true; $(this).prop("selected","selected"); return false; } if($("#brand_id option").length==(index+1)){ lastSerachIndex.length=0; } }) }
效果:
相关文章推荐
- 下拉框选中后自动局部刷新
- JavaScript实现点击文本自动定位到下拉框选中操作
- jquery chosen插件—多选下拉框可搜索-传入后台选中项+从后台读取选中项
- jQuery自动显示搜索下拉框
- easyui的combobox,自动搜索的下拉框
- 自动完成下拉框 Select2 关键字搜索的实例(本地数据与异步获取)
- JavaWeb 自动搜索下拉框 怎么实现
- easyui的combobox,自动搜索的下拉框
- php & ajax 小例子——仿百度搜索自动完成下拉框
- Win10如何设置自动搜索更新安装无线网卡驱动
- [原]考试系统——可输入并自动匹配的下拉框(二)——JQuery Easy UI框架
- 自动完成搜索
- 下拉框选中后默认为选中状态
- autocomplete-自动完成-搜索提示-仿google提示效果
- Android搜索结果显示高亮实例(有数据滑动底部自动刷新)
- 考试系统——可输入并自动匹配的下拉框(三)——Html,Web控件级联
- 输入自动提示搜索提示功能的使用说明:sugggestion.txt
- easyui-combobox下拉框修改源码 实现模糊搜索
- asp:Treeview点选一个节点时自动全部选中(或全部不选中)子点节,同时判断选中父节点