基于Jquery的輸入前提示

為了增強使用者體驗，要求使用者在關鍵字搜尋時，根據以往搜尋次數以及權重為使用者提供智能提示。

如輸入jquery，則可能提示jquery 1.4.1或jquery數組等。

雖然input标簽有曆史記錄，能夠提供以往的記錄，但是這并不是我們想要的結果，我們需要的是根據使用者輸入的字母或者中文單詞，對我們自身設定的詞庫進行檢索，取出權重值最高或搜尋頻率高的幾條記錄。

為了提高搜尋效率，我們可以使用緩存以及trie樹，這些在此不做介紹，具體講講前台的實作方法。

html頁面的主要代碼：

<div style="width:250px; height:25px; line-height:25px;border:1px solid black;" >

<input type="text" size="35" id="keyword" pid="wordlist"  autocomplete="off"/>

<div id="sel" style="width:250px; height:auto; border:1px solid black;display:none;">

<table style="width:250px;">

<tr  pid="wordlist"><td>jquery</td></tr>

<tr pid="wordlist"><td>jquery 數組</td></tr>

           　<tr pid="wordlist"><td>jquery 1.2.4</td></tr>

</table>

</div>

</div>

js代碼：

<script type="text/javascript">

$(document).ready(function(){

var position=0;

var init_value;

                　　　　$("#sel").find("tr").each(function(){

$(this).hover(

function(){

$(this).css("backgroud","blue");

},

function(){

$("this").css("backgroud","white");

}

);

$(this).click(function(){

var value=$(this).children("td").html();

$("#keyword").val(value);

$("#sel").hide();

});

});

$("#keyword").keydown(function(e){

var intkey=-1;

   　　　　　　　　　　　if(window.event)

  　　　　　　　　　　　 {    

   　　　　　　　　　　　　　　　 intkey=event.keyCode;

  　　　　　　　　　　　 }

  　　　　　　　　　　　 else

   　　　　　　　　　　　{

   　　　　　　　　　　　　　　　 intkey=e.which;     

  　　　　　　　　　　　 }   

  　　　　　　　　　　　 if(intkey==38)

   　　　　　　　　　　　{    

    　　　　　　　　　　　　　　　moveObj("up");

   　　　　　　　　　　　}

   　　　　　　　　　　　else if(intkey==40)

   　　　　　　　　　　　{

 　　　　　　　　　　　　　　　  moveObj("down");

 　　　　　　　　　　　  }   

else if(intkey==13)

{

}

});

$("#keyword").keyup(function(e){

var intkey=-1;

if(window.event)

intkey=event.keyCode;

else

intkey=e.which;

if(intkey!=38&&intkey!=40)

{

if(init_value!=$(this).val())

    　　　　　　　　　　　　　　　{

     　　　　　　　　　　　　　　　　　　　init_value=$(this).val();

$("#sel").show();

}

}

});

function moveObj(direction)

{   

var list=$("[pid='wordlist']"); 

var len=list.length;

switch(direction) 

  　　　　　　　　　　　 {

case "up":     

if(position==0)

position=len-1;

else

position=position-1;         

getTagValue(list,position);

break;

case "down":

if(position==len-1)

position=0;

else

position=position+1;

getTagValue(list,position);         

break;

default:

break;

}

}  

function getTagValue(list,position)

{

$(list).each(function(){

$(this).css("background","white");

});

if(position!=0)

{

$(list[position]).css("background","blue");

var value=$(list[position]).children("td").html();

$("#keyword").val(value);

}

else

$("#keyword").val(init_value);

}

});

</script>

轉自同僚羅俊的空間