文本框自动补齐

 一般下拉框不能实现 ，搜索文本框实现查询，对于绑定的数据多的话，查看起来就有点费劲。怎么能够实现类似于Google的所有引擎呢？往下看

<style type="text/css">
.search
{
left: 0;
position: relative;
}
.sb_input
{
background: url(Jquery/images/down.png) no-repeat center;
cursor: pointer;
}
.autoDiv
{
display: none;
position: absolute;
width: 150px;
height: 150px;
border: 1px solid #00f;
background-color: White;
overflow: auto;
}
</style>
<script src="../Jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//测试用的数据
//var list = '<%= BindDDL()%>';
//test_list = list.split('|');
var test_list = ["小张", "小苏", "小杨", "老张", "老苏", "老杨", "hello", "HI", "heel"];
var old_value = "";
var newIndex = 1; //高亮
var oldIndex = 1; //用于取消高亮显示
var counts = 0; // test_list.length; //列表个数

//按上下键设置样式
function setStyleForChange() {
newIndex = newIndex > counts ? 1 : newIndex;
newIndex = newIndex < 1 ? counts : newIndex;
$("div #" + newIndex).css("background-color", "#ebebeb");
$("div #" + oldIndex).css("background-color", "white");
}
//给文本框设置值
function setValue(newIndex, emailInput) {
var addr = $("div #" + newIndex).text(); //.replace(/^/s/s*/, '').replace(//s/s*$/, '');
emailInput.val("");
emailInput.val(addr);
}
//鼠标移入设置样式
function setStyle(obj) {

oldIndex = newIndex;
newIndex = $(obj).attr("id");
$(obj).css("background-color", "#ebebeb");
$("div #" + oldIndex).css("background-color", "white");
setValue(newIndex, $("#search_text"));
}
//鼠标移出取消样式
function cancelStyle(obj) {
$(obj).css("background-color", "white");
}
//自动显示
function autoShow() {
var obj = document.getElementById("search_text");
var mailAddressList = document.getElementById("auto_div");
var x = 0, y = 0, o = obj; h = obj.offsetHeight;
while (o != null) {
x += o.offsetLeft;
y += o.offsetTop;
o = o.offsetParent;
}
mailAddressList.style.left = x + 'px';
mailAddressList.style.top = y + h + 'px';
mailAddressList.style.display = "inline";
}
//自动隐藏
function autoHide() {
var mailAddressList = document.getElementById("auto_div");
mailAddressList.style.display = "none";
}
//自动完成
function AutoComplete(auto, search, mylist, select) {
if ($("#" + search).val() != old_value || old_value == "") {
var autoNode = $("#" + auto); //div
var Input = $("#" + search); //文本框
autoNode.addClass("autoDiv");
//过滤临时数组
var carlist = new Array();
var n = 0;

old_value = Input.val();

for (i in mylist) {
//判断是不是文本框有数据后点击按钮
if (select == "button") {
carlist[n++] = mylist[i];
}
else {
if (mylist[i].toUpperCase().indexOf(old_value.toUpperCase()) >= 0) {
carlist[n++] = mylist[i];
}
}
}
if (carlist.length == 0) {
autoHide();
return;
}
autoNode.empty(); //清空上次的记录

counts = carlist.length;
for (var i = 0; i < carlist.length; i++) {

var wordNode = carlist[i].split(',')[0]; //弹出框里的每一条内容
var idNode = carlist[i].split(',')[1];
//var newDivNode = $("<div>").attr("id", i + 1); 设置每个节点的id值

var newDivNode = $("<div>").attr("id", idNode);
newDivNode.attr("onmouseover", "setStyle(this)");
newDivNode.attr("onmouseout", "cancelStyle(this)");
newDivNode.attr("style", "font:14px/25px arial;height:25px;padding:0 8px;");
newDivNode.html(wordNode).appendTo(autoNode); //追加到弹出框

//鼠标点击文字上屏
newDivNode.click(function () {
setValue(newIndex, Input);
newIndex = 1;
autoHide();
//取出高亮节点的文本内容
//var comText = autoNode.hide().children("div").eq(newIndex - 1).text();
//文本框中的内容变成高亮节点的内容
//$("#" + search).val(comText);
})

//如果返回值有内容就显示出来
if (carlist.length > 0) {
autoShow();
} else { //服务器端无内容返回 那么隐藏弹出框
autoHide();
//弹出框隐藏的同时，高亮节点索引值也变成-1
newIndex = 1;
}
}

}

//点击页面隐藏自动补全提示框
document.onclick = function (e) {
var e = e ? e : window.event;
var tar = e.srcElement || e.target;
if (tar.id != search) {
if ($("#" + auto).is(":visible")) {
if (select == "text") {
$("#" + auto).css("display", "none")
}
else {
$("#" + auto).css("display", "inline")
}
}
}
}
}
document.onkeydown = function (event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
var emailInput = $("#search_text");
var autoNode = $("#auto_div");
switch (e.keyCode) {
case 40:
autoNode.focus();
oldIndex = newIndex;
newIndex++;
setStyleForChange();
setValue(newIndex, emailInput);
break;
case 38:
autoNode.focus();
oldIndex = newIndex;
newIndex--;
setStyleForChange();
setValue(newIndex, emailInput);
break;
case 13:
autoNode.focus();
setValue(newIndex, emailInput);
autoHide();
GetName = newIndex;
break;
}
};
$(function () {
//触发文本框
$("#search_text").keyup(function () {
$("#search_text").focus();
AutoComplete("auto_div", "search_text", test_list, "text");
});
//触发按钮
$(".sb_input").bind('click', function () {
old_value == "";
AutoComplete("auto_div", "search_text", test_list, "button");
});
});
</script>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top" style="border-top: 1px solid #54A5D5; border-left: solid 1px #54A5D5;
border-bottom: solid 1px #54A5D5; border-right: solid 1px #54A5D5;">
<table border="0" cellpadding="0" cellspacing="0" style="font-size: 12px; width: 560px;
background-color: #EBF6FE;">
<tr style="height: 25px;">
<td style="width: 250px; text-align: left; vertical-align: middle;">
<input type="text" id="search_text" /><input class="sb_input" type="button" />
<div id="auto_div">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>

ok,写的都是静态数据，如果想用自己数据，那就要后台绑定，自己去掉了

 

转载于:https://www.cnblogs.com/yan-xue-biao/p/3779470.html