标签：style class code java tar ext
一般下拉框不能实现 ，搜索文本框实现查询，对于绑定的数据多的话，查看起来就有点费劲。怎么能够实现类似于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,写的都是静态数据，如果想用自己数据，那就要后台绑定，自己去掉了
标签：style class code java tar ext
原文地址：http://www.cnblogs.com/yan-xue-biao/p/3779470.html
