oninputonfocusonmousedownsetTimeout 实现搜索下拉框功能

Posted 2020-10-16 xc_flying

　   $("#to").focus(function(){

        $(".to-list").show();
    });
    $(document).on("mousedown",function(e){
        var obj = e.target;
        if(!($(obj).attr("id") =="to" || $(obj).parents(".to-list-box").length > 0)){
            $(".to-list").hide();
        }
    });
    $(document).on("click",".to-list-box li",function(){
        var text = $(this).text();
        var value = $(this).attr("value");
        if(value == "0"){
            $("#to").val("");
        }else{
            $("#to").val(text);
        }
        $("#toList select").val(value);
        $(".to-list").hide();
    })
    function showCurrentVal1(_this){
        setTimeout(function(){
            var val = _this.value;
            var str = "";
            if(val != ""){
                $("#toList option").each(function(index,el){
                    if($(this).text().indexOf(val) >= 0){
                        str += "<li value=‘"+$(this).attr("value")+"‘>"+$(this).text()+"</li>"
                    }
                });
                $(".to-list-box").html(str);
            }else{
                $("#toList option").each(function(index,el){
                    str += "<li value=‘"+$(this).attr("value")+"‘>"+$(this).text()+"</li>"
                });
                $(".to-list-box").html(str);
            }
        },500);
    }

.to-box{position: relative;width: 100%}
.to-list{width: 100%;position: absolute;top: 32px;max-height: 500px;overflow-y: auto;border: 1px solid #ddd;background: #fff;z-index: 111;box-sizing: border-box;-webkit-box-sizing:border-box;-moz-box-sizing: border-box}
.to-list-box{width: 100%;}
.to-list-box li{display: block;line-height: 30px;cursor: pointer;padding: 0 10px;}
.to-list-box li:hover{background: #5a98de;color: #fff}

                    <div class="to-box">
                        <input type="" id="to" class="form-control col-xs-12 col-sm-12 input-text radius" value="{$Product[‘destinationName‘]}" oninput="showCurrentVal1(this)">
                        <div class="to-list" style="display: none">
                            <ul class="to-list-box">
                                <li value="0">请选择</li>
                                <volist name="areaList" id="vo">
                                    <li value="{$vo.area_id}" <eq name="Product.destination" value="$vo.area_id">selected</eq>>{$vo.cn_name}</option>
                                    <volist name="vo.son" id="s_vo">
                                        <li value="{$s_vo.area_id}" <eq name="Product.destination" value="$s_vo.area_id">selected</eq>>├{$s_vo.cn_name}</option>
                                        <volist name="s_vo.son" id="ss_vo">
                                            <li value="{$ss_vo.area_id}" <eq name="Product.destination" value="$ss_vo.area_id">selected</eq>>&nbsp;&nbsp;├{$ss_vo.cn_name}</option>
                                        </volist>
                                    </volist>
                                </volist>
                            </ul>
                        </div>
                    <span class="select-box radius" id="toList" style="display: none">
                        <select class="form-control col-xs-12 col-sm-12 select" name="destination" style="height: 25px;">
                            <option value="0">请选择</option>
                            <volist name="areaList" id="vo">
                                <option value="{$vo.area_id}" <eq name="Product.destination" value="$vo.area_id">selected</eq>>{$vo.cn_name}</option>
                                <volist name="vo.son" id="s_vo">
                                    <option value="{$s_vo.area_id}" <eq name="Product.destination" value="$s_vo.area_id">selected</eq>>├{$s_vo.cn_name}</option>
                                    <volist name="s_vo.son" id="ss_vo">
                                        <option value="{$ss_vo.area_id}" <eq name="Product.destination" value="$ss_vo.area_id">selected</eq>>&nbsp;&nbsp;├{$ss_vo.cn_name}</option>
                                    </volist>
                                </volist>
                            </volist>
                        </select>
                    </span>
                    </div>