jquery類比可輸入的下拉框

標籤：split   comment   function   select   target   com   dex   comm   inpu   

//頁面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>

jquery類比可輸入的下拉框