<input id="companyName" path="companyName" maxlength="50" class="form-control" autocomplete="off" placeholder="请至少输入两个字符进行查询" οninput="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 仿百度下拉框
最新推荐文章于 2024-04-15 14:55:13 发布