jQuery模拟自动补全

来源：互联网发布：人脸识别和人工智能编辑：程序博客网时间：2024/05/16 09:28

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

0 0