jQuery模拟自动补全

jQuery有自己的自己的自动补全功能，基本原理都是一致的。
首先有一个父div用来放组件，其中包含输入框和和子div用来模拟下拉列表。ul数据列表。

   <div class="auto_div">
        <input type="text" class="auto_input" url-data="/json/nation.json"/>
        <div class="auto_list_div">
            <ul class="auto_ul">
            </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+="<li onclick='getComVal("+k+")' id="+v.ID+">"+v.name+"</li>";
                    }else{
                            str2+="<li onclick='getComVal("+k+")' id="+v.ID+">"+v.name+"</li>";
                    }
                });
                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();
    }