jQuery 아날로그 자동 완성

9409 단어 jQuery
jQuery             ,         。
      div     ,          div        。ul    。
   <div class="auto_div">
        "text" class="auto_input" url-data="/json/nation.json"/>
        <div class="auto_list_div">
            
    class="auto_ul">
div> div>

내부 input과 div는position으로 상대 부모div의 위치를 정하고 하위 div에 높이와 Y축 스크롤 바를 추가합니다.
<style type="text/css">
        *{padding: 0;margin: 0;}
        .auto_div{position: absolute;border:3px grey solid;width:auto;padding: 20px;height:auto;}
        .auto_input{position: relative;}
        .auto_list_div{position: relative;border:2px rgb(227,228,228) solid;width:auto;height: 300px; overflow-y: scroll;}
        .auto_ul{padding: 5px;}
        .auto_ul li{width: auto;list-style: none;}
        .auto_ul li:hover{background-color: #eeeeee;font-weight: bold;}
        style>

입력 상자와 하위 div에 클릭, 키업, 모우스 이벤트 연결
        $(".auto_div").mouseleave(function(){
          $(".auto_list_div").hide();
        });
        getVal();
        $(".auto_list_div").hide()
        $(".auto_input").on("click keyup",function(event){
            if(event.type="click"){
                $(".auto_list_div").show();
            }
            if(event.type="keyup"){
                var inval = $(".auto_input").val();
                getVal(inval);
            }
        });
    });

aax를 이용하여 동적으로 데이터 원본을 얻고,
function getVal(inval){
        var url =$(".auto_input").attr("url-data"); 
        $.ajax({
            url:url,
            type:'post',
            dataType:'json',
            success:function(data){
                var nation = $("#hnation").val();
                var str1 = "";
                var str2 = "";
                $.each(data,function(k,v){
                    if(null!=inval&&undefined!=inval&&""!=inval.trim()&&v.name.indexOf(inval)>=0){
                            str1+="
  • +k+")' id="+v.ID+">"+v.name+"
  • "
    ; }else{ str2+="
  • +k+")' id="+v.ID+">"+v.name+"
  • "
    ; } }); if(null!=inval&&undefined!=inval&&""!=inval.trim()){ $(".auto_ul li").remove(); $(".auto_ul").append(str1); }else{ $(".auto_ul li").remove(); $(".auto_ul").append(str2); } }, error:function(XMLHttpRequest, textStatus, errorThrown){ alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); alert(" !"); } }); }

    결과를 input으로 복사합니다.
        function getComVal(k){
            var val = $("#"+k).text();
            $(".auto_input").val(val);
            $(".auto_list_div").hide();
        }

    좋은 웹페이지 즐겨찾기