使用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);

}

})