类似google搜索提示,方案征集

微软提供的AJAX框架里面可以实现

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

使用ajax是肯定的，但是如果数据表里面的内容特别多,我查询起来特费时间,这样用户的体验会非常不好的
那LZ你想要的是什么 ?
AJAX都自己解决了 !
那就去SQL下手了 .......
达到google那种效果估计很难，数据量那么大。还要速度快、
这个问题不算非常难，但是有点麻烦，许多细节都要你处理。我发两个例子你，希望你能静下心来慢慢看。例1: 163自动完成
说明:原理都是一样，我觉得有必要看看两个例子，也许这样你会对他有更深层次的理解。
由于源码比较长，所以我只能分开发表，如果你需要完整的源码，请留下你的E-mail<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<style type="text/css">
.autofinish{font-family:arial;font-size:12px;background:#eeeeee;border:1px solid #000000;padding:2px;color:#0000cc;}
.autofinish_over{background:#C4E4FF;font-size:12px;margin:5px;color:#0000cc}
.autofinish td{font-size:12px;}
</style>
<input id="toInput" type="text" style="margin:0;padding:0;width:80%;height:20px!important;height:25px;" autocomplete="off" name="to" onKeyDown="return f_OnKeyDown(this,event)" onKeyUp="f_OnKeyUp(this,event)" onBlur="f_OnBlur();"  tabindex="1" onDblClick="alert(this.value)" value="" >
<script language="JavaScript">
</script>
<label>
双击获取值
</label>
<script language="JavaScript">var g_ArrEmailList;
var g_MainDiv=null;
var g_Body=null;
var g_FirstTd=null;
var g_CurrentTd=null;
var g_InputObject=null;
var g_OldInnerTxt="";
var g_NewInnerTxt="";
var g_TdCssClassName="autofinish_over";
var g_TbCssClassName="autofinish";
var g_AddListContainer=null;
var g_IgnoreIE=false;
g_IgnoreIE=(navigator.userAgent.indexOf('MSIE 5')!=-1||navigator.userAgent.indexOf('Mac')!=-1);
function f_OnKeyDown(obj,event){
if(obj!=g_InputObject){
  if(g_MainDiv!=null){g_MainDiv.innerHTML="";g_MainDiv=null;};
  g_OldInnerTxt="";g_NewInnerTxt="";g_FirstTd=null;g_CurrentTd=null;g_InputObject=obj;};
  f_InitMain();
  var kc=event.keyCode;
  switch(kc){
   case 13:f_EnterKey();f_SetDivDisplay(false);return false;break;
  case 27:f_EscapeKey();f_SetDivDisplay(false);return false;break;
  case 8:f_BackSpaceKey(obj,event);return;break;
  case 38:f_UpKey();return;break;
  case 40:f_DownKey();return;break;default:break;};return true;};
function f_OnKeyUp(obj,event){
var kc=event.keyCode;
var sTemp="13,27,38,40,9,116,";
kc=kc+"";
if(sTemp.indexOf(kc)>-1){return false;};
f_InitDivData(obj,event);
if(g_NewInnerTxt==""&&kc!=32){f_SetDivDisplay(false);}else{f_SetDivDisplay(true);};};

function f_OnKeyPress(){return;};
function f_OnChange(){return;};
function f_OnBlur(){if(g_InputObject==null){return;};
var s=g_InputObject.value;
var x=s.substr(s.length-1,1);
if(x==","||x==";"){g_InputObject.value=s.substr(0,s.length-1);};return;};
function f_OnPasete(){return;};
function f_InitMain(){
if(g_Body==null){g_Body=document.body;};
if(g_MainDiv==null){g_MainDiv=f_CreateDiv();g_Body.appendChild(g_MainDiv);};};

function f_CreateDiv(){
var div=document.createElement("div");
div.id="divEmailAddressMain";
div.style.position="absolute";
div.style.display="";return div;};

function f_SetDivDisplay(bTrue){
if(bTrue){g_AddListContainer.style.display="";}else{g_AddListContainer.style.display="none";};};

function f_GetX(e){var l=e.offsetLeft;while(e=e.offsetParent){l+=e.offsetLeft;};return l;};function f_GetY(e){var t=e.offsetTop;while(e=e.offsetParent){t+=e.offsetTop;};return t;};function f_CreateTable(){var oTable=document.createElement("table");oTable.border=0;oTable.cellSpacing=2;oTable.cellPadding=2;oTable.className=g_TbCssClassName;return oTable;};function f_CreateRow(table){var rowNode=table.insertRow(-1);return rowNode;};function f_CreateColumn(row,i){var colNode=row.insertCell(document.all?-1:0);colNode.id="tdACMA_"+i;colNode.zIndex=i;colNode.align="left";colNode.style.cursor=document.all?"hand":"pointer";colNode.onmouseover=f_TdOnmouseover;colNode.onclick=f_TdOnclick;if(i==0){colNode.className=g_TdCssClassName;g_FirstTd=colNode;g_CurrentTd=colNode;}else{colNode.className="";};return colNode;};function f_TdOnmouseover(e){var o;if(!e){var e=window.event;};if(e.target){o=e.target;};if(e.srcElement){o=e.srcElement;};while(o.tagName!="TD"){o=o.parentNode;};o.className="";if(g_CurrentTd!=null){g_CurrentTd.className="";};g_CurrentTd=o;g_CurrentTd.className=g_TdCssClassName;};function f_TdOnclick(){f_FillCurrentEmail();};
function f_FillCurrentEmail(){
if(g_CurrentTd==null||g_InputObject==null){return;};
if(g_ArrEmailList==null||g_ArrEmailList.length==0){return;};
var i=parseInt(g_CurrentTd.zIndex);
var s=g_OldInnerTxt;
if(g_OldInnerTxt!=""){s+=",";};
g_InputObject.focus();
g_InputObject.value=s+"\""+g_ArrEmailList[i][0]+"\" "+"<"+g_ArrEmailList[i][1]+">,";f_SetDivDisplay(false);g_CurrentTd=null;};

function f_InitDivData(objInput,event){
var oTb,oTr,oTd;
g_ArrEmailList=f_GetArrEmailList(event);
if(g_ArrEmailList!=null){
  g_MainDiv.innerHTML="";
  oTb=f_CreateTable();
  g_MainDiv.appendChild(oTb);
  for(var i=0;i<g_ArrEmailList.length;i++)
  {oTr=f_CreateRow(oTb);
  oTd=f_CreateColumn(oTr,i);
  var sStrongTextName=g_ArrEmailList[i][0];
  var sStrongTextAddr=g_ArrEmailList[i][1];
  if(g_ArrEmailList[i][0].substring(0,g_NewInnerTxt.length)==g_NewInnerTxt){
   sStrongTextName="<b>"+g_NewInnerTxt+"</b>"+g_ArrEmailList[i][0].substring(g_NewInnerTxt.length,g_ArrEmailList[i][0].length);};
  if(g_ArrEmailList[i][1].substring(0,g_NewInnerTxt.length)==g_NewInnerTxt){
   sStrongTextAddr="<b>"+g_NewInnerTxt+"</b>"+g_ArrEmailList[i][1].substring(g_NewInnerTxt.length,g_ArrEmailList[i][1].length);};
  oTd.innerHTML="""+sStrongTextName+"" <"+sStrongTextAddr+">";};
  var e=objInput;
  if(!document.getElementById("dvAddListContainer")){
   var tDiv=document.createElement("div");
   tDiv.id="dvAddListContainer";
   with(tDiv.style){position="absolute";zIndex="99";display="none";width=height="0px";};
   if(document.all&&!g_IgnoreIE){tDiv.innerHTML='<iframe id="ifAddList" scrolling="no" marginwidth="0" marginheight="0" frameborder="1" height="100%" width="100%"></iframe>';};
   document.body.appendChild(tDiv);};
   g_AddListContainer=document.getElementById("dvAddListContainer");
   g_AddListContainer.style.left=(f_GetX(e)+1)+"px";
   g_AddListContainer.style.top=(f_GetY(e)+24)+"px";
   g_AddListContainer.style.display="";
   g_AddListContainer.appendChild(g_MainDiv);
   g_MainDiv.style.left=0;g_MainDiv.style.top=0;
   if(document.all&&!g_IgnoreIE){
    var ifr=document.getElementById("ifAddList");
   ifr.style.width=(oTb.offsetWidth+1)+"px";
   ifr.style.height=(oTb.offsetHeight+1)+"px";};};};
代码版断2:
function f_GetArrEmailList(event){
if(g_InputObject==null){return null;};
var s=g_InputObject.value;
var k=s.length;
var iLastSign=0;
if(s.lastIndexOf(",")>s.lastIndexOf(";")){
  iLastSign=s.lastIndexOf(",");}else{iLastSign=s.lastIndexOf(";");};
  g_NewInnerTxt=s.substring(iLastSign+1,k);
  if(event.keyCode==8){
   g_NewInnerTxt=s.substring(iLastSign+1,k-1);};
   g_NewInnerTxt=f_Trim(g_NewInnerTxt);
   g_OldInnerTxt=s.substring(0,iLastSign);
   g_OldInnerTxt=f_Trim(g_OldInnerTxt);
   var arr=new Array();
   var re;
   var j=0;
   if(g_NewInnerTxt==""){
    if(event.keyCode==32)arr=gArrEmailAddress;}
    else{
    try{re=new RegExp("^"+g_NewInnerTxt,"i");
    for(var i=0;i<gArrEmailAddress.length;i++){
    if(re.test(gArrEmailAddress[i][0])||re.test(gArrEmailAddress[i][1])){
     arr[j]=gArrEmailAddress[i];j++;};
    };
    }
    catch(ex){};};
    return arr;};
function f_EnterKey(){f_FillCurrentEmail();};
function f_EscapeKey(){return;};
function f_BackSpaceKey(obj,event){f_InitDivData(obj,event);if(g_NewInnerTxt==""){f_SetDivDisplay(false);}else{f_SetDivDisplay(true);};};function f_UpKey(){if(g_CurrentTd==null){return;};var k=g_CurrentTd.zIndex-1;if(k==-1){k+=1;};var oTd=document.getElementById("tdACMA_"+k);g_CurrentTd.className="";g_CurrentTd=oTd;g_CurrentTd.className=g_TdCssClassName;f_SetDivDisplay(true);};
function f_DownKey(){
if(g_CurrentTd==null){return;};
var k=g_CurrentTd.zIndex+1;
if(k==g_ArrEmailList.length){k-=1;};
var oTd=document.getElementById("tdACMA_"+k);
g_CurrentTd.className="";
g_CurrentTd=oTd;g_CurrentTd.className=g_TdCssClassName;
f_SetDivDisplay(true);};

function f_Trim(str){str=str.replace(/(^\s*)|(\s*$)/g,"");return str;};


</script>

</BODY>
</HTML>
搜索下载框源码:
JS部分代码
<script>
function ConnectServer(obj)
{
switch(event.keyCode)
{
case 13://enter
SelectMobileName();
break;
case 38://up
SelectUpItem();
break;
case 40://down
SelectDownItem();
break;
default:
ClearKeyList();
var exp = /\S/;
//找到字符串
if(obj.value.search(exp) != -1)
{
OpenHttpUrl("/mobilenet/App_Ajax/ajax_mobilenamelist.aspx?k=" + obj.value,OnConnected);
}
break;
}
}
function SelectUpItem()
{
var obj = document.getElementById("KeyListBox");
var key = document.getElementById("key");
if(obj.style.display != "none")
{
obj.focus();
if(obj.selectedIndex > 0)
{
obj.selectedIndex--;
}
else
{
obj.selectedIndex = obj.options.length -1;
}
key.focus();
}
}
function SelectDownItem()
{
var obj = document.getElementById("KeyListBox");
var key = document.getElementById("key");
if(obj.style.display != "none")
{
obj.focus();
if(obj.selectedIndex < obj.options.length - 1)
{
obj.selectedIndex++;
}
else
{
obj.selectedIndex = 0;
}
key.focus();
}
}
function ClearKeyList()
{
var obj = document.getElementById("KeyListBox");
var i = 0;
var l = obj.options.length;
while(i < l)
{
obj.options.remove(obj.options[i++]);
}
obj.style.display = "none";
}
function OnConnected()
{
  if (this.ajax.readyState == 4)
  {
    InitKeyListBox(this.ajax.responseText);
  }
}
function InitKeyListBox(v)
{
if(v.length > 1)
{
var obj = document.getElementById("KeyListBox");
var vl = v.split(",");
var i = 0;
var l = vl.length;
while(i < l)
{
var it = document.createElement("OPTION");
obj.options.add(it);
it.innerText = vl[i++];
}
obj.style.display = "block";
}
}
function SelectMobileName()
{
var box = document.getElementById("KeyListBox");
var key = document.getElementById("key");
if(box.style.display != "none")
{
key.value = box.options(box.selectedIndex).innerText;
box.style.display = "none";
}
}
</script>HTML部分代码
<input id="key" type="text" size="18" name="key" onkeyup="ConnectServer(this);"><br>

<div id="KeyListDiv" style="WIDTH:150px;height:160px;position:absolute;">
<SELECT size="2" style="width:150px;height:160px;display:none;" id="KeyListBox" ondblclick="SelectMobileName();"></SELECT></div>效果请看:www.666cb.com
操作说明:在搜索关键字输入框中输入 0 就可以出现下拉框了
超级服务器,兄弟肯定没有
我想,只要能考虑的周全一些,应该可以达到他们那样的效果
比较麻烦的部分应该是,每条记录后面的搜索结果数量,搞定了这个,就应该没有什么难得拉
谢谢 songsu
http://www.svnhost.cn/Article/Detail-16.shtml
研究下这个控件AutoCompleteExtender