<input id="companyName" path="companyName" maxlength="50" class="form-control" autocomplete="off" placeholder="请至少输入两个字符进行查询" oninput="findCompany()"/>
<div id="auto_div" style="position: absolute;z-index:50;width:92.7%">
JavaScript:
var old_value = "";
var highlightindex = -1; //高亮
//自动完成
function AutoComplete(auto, search, mylist) {
if ($("#" + search).val() != "") {//old_value || old_value ==
var verifyText = document.getElementById("verifyText");
var autoNode = $("#" + auto); //缓存对象(弹出框)
old_value = $("#" + search).val();
if (mylist.length == 0) {
verifyText.innerText = "没有找到匹配项";
autoNode.hide();
return;
}
autoNode.empty(); //清空上次的记录
for (var i in mylist) {
var wordNode = mylist[i]; //弹出框里的每一条内容
// if(wordNode.id == "")
// {
// autoNode.hide();
// return;
// }
var newDivNode = $("<div>").attr("id", i); //设置每个节点的id值
newDivNode.attr("style", "font:14px/25px arial;height:25px;padding:0 8px;cursor: pointer;background-color:white");
newDivNode.html(wordNode.name).appendTo(autoNode); //追加到弹出框
//鼠标移入高亮,移开不高亮
newDivNode.mouseover(function () {
if (highlightindex != -1) { //原来高亮的i节点要取消高亮(是-1就不需要了)
autoNode.children("div").eq(highlightindex).css("background-color", "white");
}
//记录新的高亮节点索引
highlightindex = $(this).attr("id");
$(this).css("background-color", "#ebebeb");
});
newDivNode.mouseout(function () {
$(this).css("background-color", "white");
});
//鼠标点击文字上屏
newDivNode.click(function () {
//取出高亮节点的文本内容
var comText = autoNode.hide().children("div").eq(highlightindex).text();
highlightindex = -1;
//文本框中的内容变成高亮节点的内容
$("#" + search).val(comText);
})
if (mylist.length > 0) { //如果返回值有内容就显示出来
autoNode.show();
} else { //服务器端无内容返回 那么隐藏弹出框
autoNode.hide();
//弹出框隐藏的同时,高亮节点索引值也变成-1
highlightindex = -1;
}
}
}
else
{
var autoNode = $("#" + auto);
autoNode.hide();
return;
}
//点击页面隐藏自动补全提示框
document.onclick = function (e) {
var e = e ? e : window.event;
var tar = e.srcElement || e.target;
if (tar.id != search) {
if ($("#" + auto).is(":visible")) {
$("#" + auto).css("display", "none")
}
}
}
}
$(function () {
old_value = $("#companyName").val();
$("#companyName").focus(function () {
if ($("#companyName").val() == "") {
AutoComplete("auto_div", "companyName", "");
}
});
});
function findCompany() {
var companyName = document.getElementById("companyName").value;
var verifyText = document.getElementById("verifyText");
if(companyName.length > 1) {
verifyText.innerText = "";
$.ajax({
url:url,//自己的请求地址
type: 'GET',
dataType: 'json',
data: {
word: companyName
},
success: function(data){
var rows = data.mapList;
AutoComplete("auto_div", "companyName", rows);
},
error: function(){
}
})
}
else
{
$("#auto_div").hide();
var length = 2 - companyName.length;
verifyText.innerText = "请再输入至少" + length + "个字符";
}
};
input 仿百度下拉框
最新推荐文章于 2026-04-28 16:49:02 发布
博客展示了仿百度输入框自动完成功能的实现。通过 HTML 定义输入框,JavaScript 编写自动完成函数 AutoComplete,结合 ajax 技术向服务器请求匹配数据,根据输入内容动态显示匹配列表,还处理了鼠标交互和点击页面隐藏提示框等情况。
1258

被折叠的 条评论
为什么被折叠?



