您的位置:首页 > Web前端 > JQuery

js jquery搜索下拉框 自动选中 搜索到结尾处从头搜索

2016-10-08 15:37 239 查看
html:

<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;
}
})
}


效果:




内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息