select搜索功能实现

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;