使用jquery 实现 仿google 的智能提示输入框功能 (改进版本)

在上一个版本中的仿google 智能提示输入框中存在以下缺点：

1. 提示框没有明显提示说明这是一个提示框

2.如果提示框中数据量较大，则全部显示出来会使提示框的Heiht 非常大

3.浏览器的Cookie 会在用户鼠标进入 输入框时，自动给出之前的输入提示，在界面上与智能提示造车了冲突。

为此，需要做出相应的改进：

1.禁止输入框根据cookie 内容进行提示

在输入框代码中添加：

autocomplete="off"

2. 给智能提示框具备上下滚动条效果，为智能提示框添加边框，并制定其初始长度和高度和隐藏属性

<div id="mytable" style="height:150px;width:250px;OVERFLOW-x:auto;border: 1px solid red;display:none;position:relative;left=30px;top:10px;"></div>

3.如果智能提示框中数据只有少数几行，则修改提示框的高度，使其不需要滚动条就可以全部显示出所有提示

如果智能提示框数据超过7行，则重置提示框高度，使其使用滚动条来显示提示

如何提示框具备自适应高度呢？ 获取出提示框中table 的高度即可。但在这里不能简单使用 table.offsetHeight ,而是将table中

每行高度*行数来确定table 的高度：

$("#mytable").append($mytable);
$tableHeight=data.length*20;
if($tableHeight<150){
$("#mytable").css("height",$tableHeight);
}
else{
$("#mytable").css("height","150px");
}

所有代码如下：

$("#filterName").keyup(function(){
$inputValue=$(this).val();
if($inputValue.length>1){
$url2="messageAction!filterName.action?filterString="+$(this).val();
$.post(
$url2,
function(json){
var data=eval('('+json.theaterString+')');
$("#mytable").show();
$mytable=$("<table id='mytable' />")
$("#mytable").empty();
for(var i=0;i<data.length;i++){
// alert(data[i][1]);
$tr=$("<tr id='mytr"+i+"' onmouseover='mymouseover($(this))' onmouseout='mymouseout($(this))'></tr>");
$tr.attr("id",data[i][0]);
$td1=$("<td style='width:100px;height:20px' onclick='myclick($(this))' class='myrow'></td");
$td1.attr("value",data[i][1]).append(data[i][1]);
$tr.append($td1);
if(data[i][2]!=null){

$td2=$("<td style='width:100px;height:20px' onclick='myclick($(this))' class='myrow' mynumber='2'></td");
$td2.attr("value",data[i][2]).append(data[i][2]);
$tr.css("background","yellow");
$tr.append($td2);
}
$mytable.append($tr);

}
$("#mytable").append($mytable);
$tableHeight=data.length*20;
if($tableHeight<150){
$("#mytable").css("height",$tableHeight);
}
else{
$("#mytable").css("height","150px");
}
}
,"json"
);

$mytr0=$("tr").eq(0);

if($("tr").eq(0).children().size()>0){
$("#filterName").attr("value",$mytr0.children().eq(0).text());

if($("tr").eq(0).children().size()==2){

$("#groupOrPersonId").attr("value","Person");
}
else {
$("#groupOrPersonId").attr("value","Group");
}
}


// $selectText=$("#filterName").val().replace(/"+$inputValue+"/,"");
// alert($selectText);
// alert($("#filterName").val());
$startNum=$inputValue.length;

setTextSelected($("#filterName"),$startNum,100);
// functionselRange($("#filterName"),$startNum,100);


}
})