select搜索功能实现
最近在找工作 没时间写博客 现在找到了 就发发工作上的代码吧!
今天我们说说select标签的搜索功能;
拿到任务时,我先想到就是上网找资料,最后看到的都是各种jquery插件,实在是不好用 我现在又不是开发新的项目,没法乱用插件。最后只能自己想:ps(纯js实现)
1.实现可编辑select,我的实现方式就是在原有的select内容显示框中假如input输入框。掩盖一下;最后做值传递;
2.对input的内容进行循环判断,做到搜索功能。
3.对搜索出来的值,进行处理;
4.放到select中去;
下面上代码:
<select id="telUserName" onchange="putValueToInput()">
<option value="">--请选择--</option>
<option value="yua">上海</option>
<option value="yuangui">天津</option>
<option value="fang">安徽</option>
<option value="zhang">江苏</option>
<option value="zhang">湖南</option>
<option value="zhang">湖北</option>
</select>
<input type="text" name="input" placeholder="-请选择-" id="input" onblur="inputValue()"
style="width:60px; height: 13px; position: absolute;left: 8px;top: 8px; "/>
<div style="width:80px;border:1px solid #ccc;display:none; " id="DIV">
</div>
这是页面标签,下面来js:
<script type="text/javascript">
function putValueToInput(){
var telUserName= document.getElementById("telUserName");
var perpage=telUserName.options[telUserName.selectedIndex].text;
var input=document.getElementById("input");
input.value=perpage;
}
function inputValue(){
var input=document.getElementById("input").value;
var telUserName= document.getElementById("telUserName");
var options=telUserName.getElementsByTagName("option");
var div=document.getElementById("DIV");
div.innerHTML="";
var a = 0;
for(var i=options.length-1;i>=1;i--){
var optionText=options[i].text;
if(optionText.indexOf(input) >= 0){
div.style.display='block';
div.innerHTML+="<span style='font-size: 12px;' onclick='getVlaue(this)'>"+optionText+"</span><br/>";
a++;
}
}
if(a==0){
div.style.display='none';
}
}
function getVlaue(obj){
var telUserName= document.getElementById("telUserName");
var options=telUserName.getElementsByTagName("option");
var div=document.getElementById("DIV");
for(var i=options.length-1;i>=1;i--){
var optionText=options[i].text;
var optionValue=options[i].value;
if(obj.innerHTML==optionText){
telUserName.value=optionValue;
document.getElementById("input").value=optionText;
div.style.display='none';
div.innerHTML="";
}
}
}
</script>
简要解释一下这三段js的作用
1、putValueToInput()是实现select选中值回现到input中,应为我们这里的input就是对select标签内容的代替;
2、inputValue()这是在input输入内容时,将input的value取出和select的options的值作对比;实现搜素功能;
3、getVlaue将选中的值传给select和input;