写个简单的自动补全,供学习的朋友参考,希望对大家所有帮助
需要先引入jquery,注意自己的引入路径
<script type="text/javascript" src="js/jquery.min.js"></script>
<input id="chooseCity" type="text" placeholder="输入城市查询">
页面初始化时调用下下面方法即可,传两个参数,一个元素id跟数据
$(function(){
var data = ['七里香','站长素材','HTML5特效','wshlfx.com',47,'你在哪','去哪啊'];//所有数据
searchCityLoad("chooseCity",data);//调用初始化方法 chooseCity是input元素id, data是数据,
});
这里是初始化元素的方法,用时只需要调用改方法即可,
参数一 eleId 表示元素id
参数二 arr表示数据
这里的值只有一个,有些需要几个值的,比如显示值跟选择值等,不同需求的话也可根据修改
//========初始化开始========
function searchCityLoad(eleId,arr){
//如果需要动态改变的话,
//每次执行前可以先移除事件
//$("#"+eleId).unbind();
//绑定事件
$("#"+eleId).bind('input propertychange',function(){
$("#"+eleId).after('<div style="position:absolute;z-index:9;overflow:hidden;border: 1px solid #cccccc;border-bottom:0;border-top:0;" ></div>');
$("#"+eleId).next('div').width($("#"+eleId).outerWidth()-2);//设置元素宽度
$("#"+eleId).next('div').css({"margin-left":$("#"+eleId).css("margin-left")});//设置元素边距
var arrNew = [];
var i;
for(i=0;i<arr.length;i++){
var arrItems=arr[i];
//判断元素是否存在于arrNew中,
//如果不存在则插入到arrNew的最后
if($.inArray(arrItems,arrNew)==-1) {
arrNew.push(arrItems);
}
}
//这是将input中输入的数据有关联的全部加入新生成的div中显示出来
for(i=0;i<arrNew.length;i++){
var arrWord = arrNew[i].toString();
if(((arrWord.indexOf($("#"+eleId).val())) > -1) && ($("#"+eleId).val().length > 0)){
var addArrWord = '<div class="auto-screening-zms" style="cursor:pointer;width:100%;height:30px;line-height:30px;border-bottom:1px solid #cccccc;background:#ffffff;padding: 0 10px;">' + arrWord + "</div>";
$("#"+eleId).next('div').append(addArrWord);
}
}
/*将显示出来的div的内容去重复,input内容变动时去重复*/
$(".auto-screening-zms").each(function(){
if($(this).text().indexOf($("#"+eleId).val()) < 0){
$(this).remove();
}else if($("#"+eleId).val().length == 0){
$("#"+eleId).next('div').addClass("auto-hidden");
$(".auto-screening-zms").remove();
}
});
/*弹出的提示div去重复*/
$(".auto-screening-zms").each(function(i, iText){
var iTextHtml = iText.innerHTML;
$(".auto-screening-zms").each(function(j, jText){
var jTextHtml = jText.innerHTML;
if (i < j && iTextHtml == jTextHtml) {
$(this).remove();
}
});
});
//元素悬停事件,设置悬停样式
$(".auto-screening-zms").hover(function(){
$(this).css("background","#cccccc");
},function(){
$(this).css("background","#ffffff");
});
/*点击下拉元素传值*/
$(".auto-screening-zms").on("click",function(){
$("#"+eleId).val($(this).text());
$(".auto-screening-zms").remove();
})
})
}
//========初始化结束========