jquery搜索框提示功能(完整版)

1、 jquery.searchTableTr background-color : gray;.divSearchInputdisplay: none;position: absolute;border-width: 1px; overflow:hidden;background:none repeat scroll 0 0 #FFFFFF; border:#c5dadb 1px solid; / 鼠標(biāo)停留改變搜索顯示的背景顏色 functionchangeColor(v,i) if ($(#searchIndex).val() != ) var index = $(#searchIn

2、dex).val();if (index = 10) index = 1;$(#searhTabletr).each(function(i,v) if (i = (index-1) $(this).removeClass();)$(v).addClass(searchTableTr);$(v).css(cursor,default);$(#searchIndex).val(i+1);/ 鼠標(biāo)離開移除搜索顯示的背景顏色functionmoverColor(v) $(v).removeClass();$(v).css(cursor,);$(#searchIndex).val(0);/ 點(diǎn)擊搜索顯示

3、信息functionsearchValue(v) $(#search).val($(v).text();$(#searhInput).hide();$(function()$(#divWidthAuto).width(533);$(#search).width(530);$(#searhInput).width(533);$(#searhTable).width(533);vardisp = true;/ 點(diǎn)擊空白處隱藏$(document).click(function()/ 點(diǎn)擊搜索處顯示$(#divSearchPage).click(function()disp = false;if (

4、$(#searhInput).css(display) = block) $(#searhInput).show(););if (disp) $(#searhInput).hide();disp = true;);/ 右鍵點(diǎn)擊搜索處顯示$(#divSearchPage).bind(contextmenu,function(e) $(#searhInput).show(););/ 輸入框鍵盤觸發(fā)事件 $(#search).keyup(function(e) var key = e.which;/ 下鍵 if(key = 40)$(#searhInput).show();var index = $

5、(#searchIndex).val(); varmaxIndex = $(#maxIndex).val();if (index = new Number(maxIndex) index = 0;if (index = (new Number(maxIndex)+1) index = 1; $(#searhTabletr).each(function(i,v) if (i = index) $(#search).val($(this).text(); $(this).addClass(searchTableTr); else $(this).removeClass(); ) index+;$(

6、#searchIndex).val(index); / 上鍵 if(key = 38)$(#searhInput).show();var index = $(#searchIndex).val(); varmaxIndex = $(#maxIndex).val();if (index = 0) index = (new Number(maxIndex)+1);if (index = 1) index = (new Number(maxIndex)+1); index = index - 2; $(#searhTabletr).each(function(i,v) if (i = index)

7、$(#search).val($(this).text(); $(this).addClass(searchTableTr); else $(this).removeClass();)index = index+1;$(#searchIndex).val(index);if (key != 40 & key != 38) if(this.value != ) querySearchInfo(this); else $(#searhTable).empty(); $(#searhInput).hide(););/ 搜索框輸入 functionquerySearchInfo(v) jQuery.p

8、ost(json.action,value : $(#search).val(),function(json) $(#searhTable).empty(); $(#searhInput).hide();$(#searchIndex).val(0);for (i = 0;i json.test.length;i+) if (i = 10) break;$(#searhTable).append(+json.testi.a1+)if (json.test.length != 0) var y = ($(v).offset().top+30);var x = ($(v).offset().left-1);$(#searhInput).css(top,y);$(#searhInput).css(left, x)