zoukankan      html  css  js  c++  java
  • oninput、onfocus、onmousedown、setTimeout 实现搜索下拉框功能

        $("#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>
  • 相关阅读:
    在Eclipse/STS里添加代码反编译器(.class)步骤
    关于页面添加字段
    关于jeesite Date和时间戳问题
    关于前端ajax通过实体类向后端传参报不存在问题
    引入字典
    关于添加主键
    简单的前后端分离项目 部署到 centos7
    Cenost7 Mysql5.7 安装 并打开远程访问
    npm install vue-cli -g 报错
    docker 笔记 docker 基础 docker 常用命令
  • 原文地址:https://www.cnblogs.com/xie-xiao-chao/p/7928651.html
Copyright © 2011-2022 走看看