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にclick、keyup、mouseイベントをバインドする

        $(".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);
            }
        });
    });

ajaxを利用してデータソースを動的に取得し、

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();
    }