jquery模拟可输入的下拉框

Posted 2020-09-25 liguangsunls

//页面html
<div id="select" class="select" >
                              <ul>
                                <c:forEach items="${movieCityList}" var="cy" varStatus="st">
                                    <li>
                                        <a href="javascript:void(0)" onclick="selectOption($(this))">${cy.cityName}</a>
                                        <input style="display: none;" name="cityCode" id="cityCode${st.count }" value="${cy.vasCityId}"/>
                                    </li>
                                </c:forEach>
                              </ul>
                            </div>

//jquery代码
<script type="text/javascript">

            //城市下拉框函数
            function getData(){//获取全部城市数据
                var data=new Array();
                $(".select a").each(function(i){
                    data[i]=$(this).html();
                });
                return data;
            }
            function judgeLength(l){//依据结果显示下拉框高度
                if(l>5){
                    $(".select").css("height","100px");
                }else{
                    $(".select").css("height",l*20+"px");
                }
            }
            function selectOption(obj){//选中
                $("#cityName").val(obj.html());
                $("#cityId").val(obj.next("input").val());
                $(".select").hide();
                loadCinemalName();
            }
            function onFocus(){//input标签获取焦点
                var l=getData().length;
                if($(‘#cityName‘).val()==‘‘){
                    judgeLength(l);
                $(".select").show();
                }else{
                    var obj=$("#cityName");
                    onKeyUp(obj);
                }
            }
            function onKeyUp(obj){//input keyup事件
                var input=obj.val()+‘‘;
                $(".select li").hide();
                var height=0;   
                var data=getData();
                var l=getData().length;
                if(input!=‘‘){//输入时动态检索是否存在所输入的城市
                    for(var i=0;i<data.length;i++){
                        var str=data[i]+"";
                        if(str.indexOf(input)!=-1){
                            height++;
                            judgeLength(height);
                            $(".select").show();
                            $(".select li:eq("+i+")").show();
                            var cityId=$(".select li:eq("+i+") input").val();
                            $("#cityId").val(cityId);
                        }
                    }
                    loadCinemalName();
                }else{
                    judgeLength(l);
                    $(".select li").show();
                }
            }
            function onBlur(e){//失去焦点时隐藏下拉框
                alert(e.target);
                //$(".select").hide();
            }
        </script>