jquery自定义实现select搜索下拉功能

容易看懂 的就直接贴代码了。

<form action="">
<div class="o-mis0519-alert">
    <table class="o-mis0519-table-a" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td align="left" width="100">设备编号</td>
            <td>
<!--                <div class="searchshowres" style="display:none;">-->
<!--                    <div class="searchres">1111</div>-->
<!--                </div>-->
                <input class="searchtxt" style="width:200px;">
                <select name="device_code" id="device_code" class="searchsel">
                    <option value="">-------请选择-------</option>
                 <?php if($device_codes):foreach ($device_codes as $val):?>
                    <option value="<?=$val;?>"><?=$val;?></option>
                 <?php endforeach;endif;?>
                </select>
            </td>
        </tr>
    </table>
</div>
    <input type="hidden" name="post_id" id="post_id" value="<?=$post_id;?>">
    <p class="o-mis-p2-submite"><input type="submit" id="sub" value="提  交" class="" /></p>
</form>
<script>
    $('#sub').click(function () {
        var post_id = $('#post_id').val();
        var device_code = $('#device_code').val();

        if (!post_id) {
            $.dialog.tips('缺少参数',2,'error.gif');
        }

        $.ajax({
            url : "<?=Yii::$app->urlManager->createUrl('/Zhibo/workroom/dobinddevice'); ?>",
            type : 'post',
            dataType : 'json',
            data : {'post_id' : post_id, 'device_code' : device_code},
            success : function (res) {
                if (1 == res.status) {
                    $.dialog.tips(res.info,2,'success.gif');
                    window.location.reload();
                } else {
                    $.dialog.tips(res.info,2,'error.gif');
                }
            }
        });
        return false;
    })

</script>

<script>
    $(function(){
        var alloption = $('#device_code').html();

        var alloptionarr = [];

        $(".searchsel").children("option").each(function(){
            alloptionarr.push(this);
        });

        $(".searchtxt").on("keyup", function(){
            var $stxt = $(this);
            var value = $stxt.val();
            var otxt = '';

            //遍历select的option的文本中包含输入的文本内容的option集合
            // $stxt.next(".searchsel").children("option:contains('"+value+"')").each(function(){
            //     console.log(23);
            //     // otxt += "<span class='searchresval' code='"+$(this).attr("value")+"' style='width:147;cursor:hand' >"+$(this).text()+"</span><br>";
            //     otxt += "<option value='"+ $(this).attr("value") +"'>" + $(this).attr("value") + "</option>";
            // });
            $(alloptionarr).each(function(data,val){
                var attrvaulue = $(val).attr('value');
                if (attrvaulue.indexOf(value) != -1 && value) { //如果option的文本中包含输入的文本内容
                    otxt += "<option value='"+ attrvaulue +"'>" + attrvaulue + "</option>";
                }
            });

            //如果需要检索的值为空
            if (!value) {
                // console.log(alloption);
                $('#device_code').empty().html(alloption)
            } else {
                $stxt.next(".searchsel").empty().append(otxt);
            }
            //在select框下展现搜索的结果
            // $stxt.prev(".searchshowres").show()
            //     .children(".searchres").empty().append(otxt)
            //     .children('.searchresval').bind("mouseover", function(){//鼠标移到移出索索结果上的一个颜色变化
            //     $(this).css("background", "#cccccc");
            // }).bind("mouseout", function(){
            //     $(this).css("background", "#ffffff");
            // }).bind("click", function(){
            //     $stxt.val($(this).text());
            //     $stxt.prev(".searchshowres").hide();
            //     $stxt.next(".searchsel").children("option[value='"+$(this).attr("code")+"']").attr("selected", true);
            //
            // });


        });

        // $(".searchSel").on("change", function(){
        //     $(this).prev(".searchtxt").val($(this).find("option:selected").text());
        // });
    });
</script>