基于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();

/* 通过AJAX技术对table进行初始化 */

$("#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>

转自同事罗俊的空间