基于jquery的输入前提示...
时间：2010-08-12 来源：jiavjiav
为了增强用户体验，要求用户在关键字搜索时，根据以往搜索次数以及权重为用户提供智能提示。
如输入jquery，则可能提示jquery 1.4.1或jquery数组等。
虽然input标签有历史记录，能够提供以往的记录，但是这并不是我们想要的结果，我们需要的是根据用户输入的字母或者中文单词，对我们自身设置的词库进行检索，取出权重值最高或搜索频率高的几条记录。
为了提高搜索效率，我们可以使用缓存以及trie树，这些在此不做介绍，具体讲讲前台的实现方法。
html页面的主要代码：
<div style="width:250px; line-border:1px solid black;" >
<input type="text" size="35" id="keyword" pid="wordlist" autocomplete="off"/>
<div id="sel" style="width:250px; 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>
转自同事罗俊的空间
相关阅读 更多 +
