jQuery模擬自動補全
阿新 • • 發佈:2018-12-29
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();
}