谁能给个AJAX suggest 实例啊。。。

时间：2021-07-10 05:10:07
能实现鼠标和键盘上下键选择的（光标选到哪个就把值读到问本框），就像Google Suggest那样。。。。为了学习，谢谢！

18 个解决方案

#1

ding

#2

实例没有，你直接上googe看js源码(前台）
原理，输入字符时捕捉事件，进行ajax交互

#3

实例没有.
原理应该很简单了。
在文本框的onkeyup事件里调用ajax获得内容显示到一个层里，如果是上下键就读去当前选择的内容到文本框当然还要响应鼠标事件.

#4

其实我现在已经做了一部分了，但是在一个地方卡住了，就是上下键选择时只能按一下，然后哪个DIV框就不见了 ，相当郁闷。。。

#5

<!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>
<script language="javascript"> 
var intIndex=0;arrList = new Array(); 
arrList[intIndex++] = " asdvasdvzxcvasdfwe"; 
arrList[intIndex++] = " aasdxzcvzxcvaaasdd"; 
arrList[intIndex++] = " zxcv zc vfzsdfasdf"; 
arrList[intIndex++] = " adsfasdfxczvzxcvas"; 
arrList[intIndex++] = " asdfasdfxzcvzxcvaa"; 
arrList[intIndex++] = " asdfvzxcvzxcvzxcvs"; 
arrList[intIndex++] = " asdfzxcvzxcvssssss"; 
arrList[intIndex++] = " asdfxcvzxcvasdasda"; 
arrList[intIndex++] = " asdfasdvzxcvasdasd"; 
arrList[intIndex++] = " asdfxcvzxcvzasdaxc"; 
arrList[intIndex++] = " zxcvzxcvasdadazxcv"; 
arrList[intIndex++] = " fgbdfhdhasdasdasgd"; 
arrList[intIndex++] = " sdafasasdasdasadfn"; 
arrList[intIndex++] = " dzxsdfasdagsdfgcvn"; 
arrList[intIndex++] = " dhgdfhdfhdvbasdass"; 
arrList[intIndex++] = " sdfgvxcvxgagxcxcfn"; 
arrList[intIndex++] = " asdfgcxvbxasdacvbn"; 
arrList[intIndex++] = " afsdfgsdfbggsdfcvb"; 
arrList[intIndex++] = " baffaddsdfgsdfgsdg"; 
arrList[intIndex++] = " 2fda2fdsdfgsdfgscb"; 
arrList[intIndex++] = " dasddosdfgsdfgsdgn"; 

function smanPromptList(arrList,objInputId)
{ 
this.style = "background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;" 
if(arrList.constructor!=Array)
{
alert('smanPromptList初始化失败:第一个参数非数组!');
return;
}

window.onload =function() 
{ 
 arrList.sort(function(a,b)
 { 
   if(a.length>b.length)
   {
   return 1;
   } 
   else if(a.length==b.length)
   {
   return a.localeCompare(b);
   } 
   else 
   {
   return -1;
   }
}) 
var objouter=document.getElementById("__smanDisp") //显示的DIV对象 
var objInput = document.getElementById(objInputId); //文本框对象 
var selectedIndex=-1; 
var intTmp; //循环用的:) 
if (objInput==null) {alert('smanPromptList初始化失败:没有找到"'+objInputId+'"文本框');return ;} 
//文本框失去焦点 
objInput.onblur=function(){ 
objouter.style.display='none'; 
} 
//文本框按键抬起 
objInput.onkeyup=checkKeyCode; 
//文本框得到焦点 
objInput.onfocus=checkAndShow; 


function checkKeyCode()
{ 
var ie = (document.all)? true:false; 
if (ie)
{ 
var keyCode=event.keyCode; 
if (keyCode==40||keyCode==38)
{ //下上 
  var isUp=false 
  if(keyCode==40) isUp=true ; 
  chageSelection(isUp); 
}
else if (keyCode==13)
{//回车 
  outSelection(selectedIndex); 
}
else
{ 
  checkAndShow();
}
}
else
{ 
checkAndShow() 
} 
divPosition() 
} 

function checkAndShow()
{ 
var strInput = objInput.value; 
if (strInput!="")
{ 
divPosition(); 
selectedIndex=-1; 
objouter.innerHTML ="";
  
for(intTmp=0;intTmp<arrList.length;intTmp++)
{ 
for(i=0;i<arrList[intTmp].length;i++)
{  
if(arrList[intTmp].substr(i, strInput.length).toUpperCase()==strInput.toUpperCase())
{ 
addOption(arrList[intTmp],strInput); 
} 
} 
} 
objouter.style.display=''; 
}
else
{ 
  objouter.style.display='none'; 
} 

function addOption(value,keyw)
{ 
var v=value.replace(keyw,"<b><font color=red>"+keyw+"</font></b>"); 
objouter.innerHTML +="<div onmouseover=\"this.className='sman_selectedStyle'\" onmouseout=\"this.className=''\" onmousedown=\"document.getElementById('"+objInputId+"').value='" + value + "'\">" + v + "</div>"  
} 
}

function chageSelection(isUp){ 
if (objouter.style.display=='none')
{ 
objouter.style.display=''; 
}
else
{ 
if (isUp) 
{
  selectedIndex++
} 
else 
{
  selectedIndex--
} 
} 

var maxIndex = objouter.children.length-1; 

if (selectedIndex<0)
{
selectedIndex=0
} 

if (selectedIndex>maxIndex) 
{
selectedIndex=maxIndex
} 

for (intTmp=0;intTmp<=maxIndex;intTmp++)
{ 
if (intTmp==selectedIndex)
{ 
  objouter.children[intTmp].className="sman_selectedStyle"; 
}
else
{ 
  objouter.children[intTmp].className=""; 
} 
} 
}

function outSelection(Index)
{ 
objInput.value = objouter.children[Index].innerText; 
objouter.style.display='none'; 
} 

function divPosition()
{ 
objouter.style.top =getAbsoluteHeight(objInput)+getAbsoluteTop(objInput); 
objouter.style.left =getAbsoluteLeft(objInput);  
objouter.style.width=getAbsoluteWidth(objInput) 
}

}

document.write("<div id='__smanDisp' style='position:absolute;display:none;" + this.style + "' onbulr> </div>"); 
document.write("<style>.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>"); 

function getAbsoluteHeight(ob)
{ 
return ob.offsetHeight 
}

function getAbsoluteWidth(ob)
{ 
return ob.offsetWidth 
}

function getAbsoluteLeft(ob)
{ 
var s_el=0;
el=ob;
while(el)
{
s_el=s_el+el.offsetLeft;
el=el.offsetParent;
}; 
return s_el 
} 

function getAbsoluteTop(ob)
{ 
var s_el=0;el=ob;
while(el)
{
s_el=s_el+el.offsetTop ;
el=el.offsetParent;}; 
return s_el; 
} 
} 
smanPromptList(arrList,"inputer") 
</script> 

<table>
<tr>
<td> 
<input type="text" id="inputer">
</td>
</tr>
</table>

</BODY>
</HTML>

#6

代码可以直接运行,,,
arrList[intIndex++] = " asdvasdvzxcvasdfwe";  
arrList[intIndex++] = " aasdxzcvzxcvaaasdd";  
arrList[intIndex++] = " zxcv zc vfzsdfasdf";  
arrList[intIndex++] = " adsfasdfxczvzxcvas";  
arrList[intIndex++] = " asdfasdfxzcvzxcvaa";  
arrList[intIndex++] = " asdfvzxcvzxcvzxcvs";  
arrList[intIndex++] = " asdfzxcvzxcvssssss";  
arrList[intIndex++] = " asdfxcvzxcvasdasda";  
arrList[intIndex++] = " asdfasdvzxcvasdasd";  
arrList[intIndex++] = " asdfxcvzxcvzasdaxc";  
arrList[intIndex++] = " zxcvzxcvasdadazxcv";  
arrList[intIndex++] = " fgbdfhdhasdasdasgd";  
arrList[intIndex++] = " sdafasasdasdasadfn";  
arrList[intIndex++] = " dzxsdfasdagsdfgcvn";  
arrList[intIndex++] = " dhgdfhdfhdvbasdass";  
arrList[intIndex++] = " sdfgvxcvxgagxcxcfn";  
arrList[intIndex++] = " asdfgcxvbxasdacvbn";  
arrList[intIndex++] = " afsdfgsdfbggsdfcvb";  
arrList[intIndex++] = " baffaddsdfgsdfgsdg";  
arrList[intIndex++] = " 2fda2fdsdfgsdfgscb";  
arrList[intIndex++] = " dasddosdfgsdfgsdgn";  
这些是暂假设数据库有的数据,,只要输入类似a   则可以出现GOOGLE效果

#7

这个例子比较简单明了吧
<!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="">   
  <style>   
  body,div   {   
  font-family:verdana;   
  line-height:100%;   
  font-size:9pt;   
  }   
  input   {   
  width:300px;   
  }   
  h1   {   
  text-align:center;   
  font-size:2.2em;   
  }   
  #divf   {   
  margin:10px;   
  font-size:0.8em;   
  text-align:center;   
  }   
  #divc   {   
  border:1px   solid   #333333;   
  }   
  .des   {   
  width:500px;   
  background-color:lightyellow;   
  border:1px   solid   #333;   
  padding:20px;   
  margin-top:20px;   
  }   
  .mouseover   {   
  color:#ffffff;   
  background-color:highlight;   
  cursor:default;   
  }   
  .mouseout   {   
  color:#000000;   
  background-color:#ffffff;   
  cursor:default;   
  }   
  </style>   
  <SCRIPT   LANGUAGE="JavaScript">   
  <!--   
    
  function   jsAuto(instaceName,objID)   
  {   
  this._msg   =   [];   
  this._o   =   document.getElementById(   objID   );   
  if   (!this._o)   return;   
  this._f   =   null;   
  this._i   =   instaceName;   
  this._r   =   null;   
  this._v   =   null;   
  this._o.style.visibility   =   "hidden";   
  this._o.style.lineHeight   =   "120%";   
  this._o.style.position   =   "absolute";   
  this._o.style.zIndex   =   "9999";   
  return   this;   
  };   
    
  //   mouseEvent.   
  jsAuto.prototype.domouseover=function(obj)   
  {   
  obj.tagName=="DIV"   ?   obj.className="mouseover"   :   obj.parentElement.className="mouseover";   
  };   
  jsAuto.prototype.domouseout=function(obj)   
  {   
  obj.tagName=="DIV"   ?   obj.className="mouseout"   :   obj.parentElement.className="mouseout";   
  };   
  jsAuto.prototype.doclick=function(msg)   {   with   (this)   
  {   
  if(_r)   
  {   
  _r.value   =   msg;   
  _o.style.visibility   =   "hidden";   
  }   
  else   
  {   
  alert("javascript   autocomplete   ERROR   :\n\n   can   not   get   return   object.");   
  return;   
  }   
  }};   
    
  //   object   method;   
  jsAuto.prototype.item=function(msg)   
  {   
  if(   msg.indexOf(",")>0   )   
  {   
  var   arrMsg=msg.split(",");   
  for(var   i=0;   i<arrMsg.length;   i++)   
  {   
  arrMsg[i]   ?   this._msg.push(arrMsg[i])   :   "";   
  }   
  }   
  else   
  {   
  this._msg.push(msg);   
  }   
  this._msg.sort();   
  };   
  jsAuto.prototype.append=function(msg)   {   with   (this)   
  {   
  _i   ?   ""   :   _i   =   eval(_i);   
  var   div   =   document.createElement("DIV");   
    
  //bind   event   to   object.   
  div.onmouseover   =   function(){_i.domouseover(this)};   
  div.onmouseout   =   function(){_i.domouseout(this)};   
  div.onclick   =   function(){_i.doclick(msg)};   
  var   re     =   new   RegExp("("   +   _v   +   ")","i");   
  div.className   =   "mouseout";   
  if   (_v)   div.innerHTML   =   msg.replace(re   ,   "<strong>$1</strong>");   
  div.style.fontFamily   =   "verdana";   
    
  _o.appendChild(div);   
  }};   
  jsAuto.prototype.display=function()   {   with(this)   
  {   
  if(_f)   
  {   
  _o.style.left   =   _r.offsetLeft;   
  _o.style.width   =   _r.offsetWidth;   
  _o.style.top   =   _r.offsetTop   +   _r.offsetHeight;   
  _o.style.visibility   =   "visible";   
  }   
  else   
  {   
  _o.style.visibility="hidden";   
  }   
  }};   
  jsAuto.prototype.handleEvent=function(fValue,fID)   {   with   (this)   
  {   
  var   re;   
  _f   =   false;   
  _r   =   document.getElementById(   fID   );   
  _v   =   fValue;   
  _i   =   eval(_i);   
  re   =   new   RegExp("^"   +   fValue   +   "",   "i");   
    
  if(   fValue==""   )   return;   
  _o.innerHTML="";   
    
  for(var   i=0;   i<_msg.length;   i++)   
  {   
  if(re.test(_msg[i]))   
  {   
  _i.append(_msg[i]);   
  _f   =   true;   
  }   
  }   
    
  _i   ?   _i.display()   :   alert("can   not   get   instance");   
  }};   
  window.onerror=new   Function("return   true;");   
  //-->   
  </SCRIPT>   
  </HEAD>   
    
  <BODY>   
  <div   id="divc">   
  <!--this   is   the   autocomplete   container.-->   
  </div>   
  <h1>Autocomplete   Function</h1>   
  <div   align="center">   
  <input   onkeyup="jsAutoInstance.handleEvent(this.value,'auto')"   id="auto">   
  </div>   
  <div   id="divf">   
 
  </div>   
    
  <SCRIPT   LANGUAGE="JavaScript">   
  <!--   
  var   jsAutoInstance   =   new   jsAuto("jsAutoInstance","divc");   
  jsAutoInstance.item("a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start");   
  jsAutoInstance.item("blueDestiny");   
  jsAutoInstance.item("BlueMiracle,Blue");   
  jsAutoInstance.item("angela,geniuslau");   
  jsAutoInstance.item("never-online");   
  //-->   
  </SCRIPT>   
  </BODY>   
  </HTML>  

#8

来学习

#9

可以去这里找
http://country.lvyou168.cn/flashwariii/download.htm

#10

http://blog.csdn.net/sandyxxx/archive/2008/02/03/2079690.aspx

一个例子，参考一下

#11



var DIV_HIGHLIGHT_COLOR = "#C30";

var DIV_BG_COLOR = "#EEE";


//Gets the browser specific XmlHttpRequest Object

function getXmlHttpRequestObject() {

	if (window.XMLHttpRequest) {

		return new XMLHttpRequest();

	} else if(window.ActiveXObject) {

		return new ActiveXObject("Microsoft.XMLHTTP");

	} else {

		alert("Your Browser Sucks!\nIt's about time to upgrade don't you think?");

	}

}

function createAjaxObj(){

  var httprequest=false

  if (window.XMLHttpRequest)

  { // if Mozilla, Safari etc

    httprequest=new XMLHttpRequest()

    if (httprequest.overrideMimeType)

      httprequest.overrideMimeType('text/xml')

   }

   else if (window.ActiveXObject)

   { // if IE

     try {

       httprequest=new ActiveXObject("Msxml2.XMLHTTP");

     }

     catch (e){

       try{

          httprequest=new ActiveXObject("Microsoft.XMLHTTP");

       }

       catch (e){}

     }

   }

   return httprequest

}

//Our XmlHttpRequest object to get the auto suggest

var searchReq = createAjaxObj();


//Called from keyup on the search textbox.

//Starts the AJAX request.

function searchSuggest() {

	if (searchReq.readyState == 4 || searchReq.readyState == 0) {

		var str = escape(document.getElementById('txtSearch').value);

		searchReq.open("GET", 'Search.aspx?search=' + str, true);

		searchReq.onreadystatechange = handleSearchSuggest; 

		searchReq.send(null);

	}		

}


//Called when the AJAX response is returned.

function handleSearchSuggest() {

	if (searchReq.readyState == 4) {

		var ss = document.getElementById('search_suggest')

		ss.style.cursor = "pointer";

		ss.innerHTML = '';

		var str = searchReq.responseText.split("\n");

		        		for(i=0; i < str.length - 1; i++) {

			//Build our element string.  This is cleaner using the DOM, but

			//IE doesn't support dynamically added attributes.

			var suggest = '<div onmouseover="javascript:suggestOver(this);" ';

			suggest += 'onmouseout="javascript:suggestOut(this);" ';

			suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';

			suggest += 'class="suggest_link">' + str[i] + '</div>';

			ss.innerHTML += suggest;


		}



	}

}


//Mouse over function

function suggestOver(div_value) {

	div_value.className = 'suggest_link_over';

}

//Mouse out function

function suggestOut(div_value) {

	div_value.className = 'suggest_link';

}

//Click function

function setSearch(value) {

	document.getElementById('txtSearch').value = value;

	document.getElementById('search_suggest').innerHTML = '';

}


function getDiv (divID)

{

	if (!globalDiv)

	{

		// 如果div在页面中不存在,创建一个新的div


		if (!document.getElementById(divID))

		{

			var newNode = document.createElement("div");

			newNode.setAttribute("id", divID);

			document.body.appendChild(newNode);

		}


		// globalDiv设置为div的引用		

		globalDiv = document.getElementById(divID);


		// 计算div左上角的位置		

		var x = queryField.offsetLeft;

		var y = queryField.offsetTop + queryField.offsetHeight;

		var parent = queryField;

		while (parent.offsetParent)

		{

			parent = parent.offsetParent;

			x += parent.offsetLeft;

			y += parent.offsetTop;

		}


		// 如果没有对div设置格式,则为其设置相应的显示样式		

		if (!divFormatted)

		{

			globalDiv.style.backgroundColor = DIV_BG_COLOR;

			globalDiv.style.fontFamily = DIV_FONT;

			globalDiv.style.padding = DIV_PADDING;

			globalDiv.style.border = DIV_BORDER;

			globalDiv.style.width = "100px";

			globalDiv.style.fontSize = "90%";


			globalDiv.style.position = "absolute";

			globalDiv.style.left = x + "px";

			globalDiv.style.top = y + "px";

			globalDiv.style.visibility = "hidden";

			globalDiv.style.zIndex = 10000;


			divFormatted = true;

		}

	}


	return globalDiv;

}


function keypressHandler ()

{

	// 获取对下拉区的引用		

	//var div = getDiv(divName);

	var div = document.getElementById('search_suggest');


	// 如果下拉区不显示,则什么也不做		

//	if (div.style.visibility == "hidden")

//	{

//		return true;

//	}


	// 确保evt是一个有效的事件	

	if (window.event)

	{

		evt = window.event;

	}

	var key = evt.keyCode;


	var KEYUP = 38;

	var KEYDOWN = 40;

	var KEYENTER = 13;

	var KEYTAB = 9;


	// 只处理上下键、回车键和Tab键的响应		

	if ((key != KEYUP) && (key != KEYDOWN) && (key != KEYENTER) && (key != KEYTAB))

	{

		return true;

	}


	var selNum = getSelectedSpanNum(div);

	var selSpan = setSelectedSpan(div, selNum);


	// 如果键入回车和Tab,则选择当前选择条目	

	if ((key == KEYENTER) || (key == KEYTAB))

	{

		if (selSpan)

		{

			_selectResult(selSpan);

		}

		evt.cancelBubble = true;

		return false;

	}

	else //如果键入上下键,则上下移动选中条目

	{

		if (key == KEYUP)

		{

			selSpan = setSelectedSpan(div, selNum - 1);

		}

		if (key == KEYDOWN)

		{

			selSpan = setSelectedSpan(div, selNum + 1);

		}

		if (selSpan)

		{

			_highlightResult(selSpan);

		}

	}


	// 显示下拉区

	//showDiv(true);

	return true;

}


function getSelectedSpanNum(div)

{

	var count = -1;

	var spans = div.getElementsByTagName("div");

	if (spans)

	{

		for (var i = 0; i < spans.length; i++)

		{

			count++;

			if (spans[i].style.backgroundColor != div.style.backgroundColor)

			{

				return count;

			}

		}

	}


	return -1;

	//return count;

}


function setSelectedSpan(div, spanNum)

{

	var count = -1;

	var thisSpan;

	var spans = div.getElementsByTagName("div");

	if (spans)

	{

		for (var i = 0; i < spans.length; i++)

		{

			if (++count == spanNum)

			{

				highlightResult(spans[i]);

				thisSpan = spans[i];

			}

			else

			{

				_unhighlightResult(spans[i]);

			}

		}

	}


	return thisSpan;

}



function highlightResult()

{

	_highlightResult(this);

}


function _highlightResult(item)

{

	item.style.backgroundColor = DIV_HIGHLIGHT_COLOR;

}





    <title>Untitled Page</title>


    <script type="text/javascript" src="Search.js"></script>


    <style type="text/css" media="screen">

        body

        {

            font: 11px arial;

        }

        .suggest_link

        {

            background-color: #FFFFFF;

            padding: 2px 6px 2px 6px;

        }

        .suggest_link_over

        {

            background-color: #E8F2FE;

            padding: 2px 6px 2px 6px;

        }

        #search_suggest

        {

            position: absolute;

            background-color: #FFFFFF;

            text-align: left;

            border: 1px solid #000000;

        }

    </style>

</head>

<body>

    <div style="width: 500px;">

        <form id="frmSearch" action="" runat="server">

        <input type="text" id="txtSearch" name="txtSearch" alt="Search Criteria" onkeyup="searchSuggest();" autocomplete="off" />

        <asp:Button ID="cmdSearch" runat="server" Text="Search" 

            UseSubmitBehavior="False" /><br />

            <div id="search_suggest">

            </div>

        </form>

    </div>




    string ConCtosProd = ConfigurationManager.ConnectionStrings["con"].ConnectionString;

    protected void Page_Load(object sender, EventArgs e)

    {

        string Str = Request.QueryString["search"].ToString();

        string Results = SearchOrder(Str.Trim().ToString());

        Response.Write(Results);

        Response.End();

    }



    private string SearchOrder(string searchStr)

    {

        string OrderStr;

        string Result = string.Empty;

        OrderStr = "your SQL"

        using (SqlConnection Con = new SqlConnection(ConCtosProd))

        {

            using (SqlCommand Cmd = new SqlCommand(OrderStr, Con))

            {

                Con.Open();

                using (SqlDataReader Dr = Cmd.ExecuteReader())

                {

                    if (Dr.HasRows)

                    {

                        while (Dr.Read())

                        {

                            Result += Convert.ToString(Dr["Company_Name"]) + "\n";


                        }

                    }


                }

            }

        }

        return Result;

    }

}


#12

看看这个http://blog.csdn.net/familyx/archive/2008/02/05/2084513.aspx

#13

http://blog.csdn.net/familyx/archive/2008/02/05/2084513.aspx

#14

有可以跑起来的吗？

#15

征服Ajax--Web 2.0开发技术详解
代码可以去人民邮电出版社的网站下!

#16

学习..

#17

不明LZ在说什么

#18

什么呀

#1

ding

#2

实例没有，你直接上googe看js源码(前台）
原理，输入字符时捕捉事件，进行ajax交互

#3

实例没有.
原理应该很简单了。
在文本框的onkeyup事件里调用ajax获得内容显示到一个层里，如果是上下键就读去当前选择的内容到文本框当然还要响应鼠标事件.

#4

其实我现在已经做了一部分了，但是在一个地方卡住了，就是上下键选择时只能按一下，然后哪个DIV框就不见了 ，相当郁闷。。。

#5

<!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>
<script language="javascript"> 
var intIndex=0;arrList = new Array(); 
arrList[intIndex++] = " asdvasdvzxcvasdfwe"; 
arrList[intIndex++] = " aasdxzcvzxcvaaasdd"; 
arrList[intIndex++] = " zxcv zc vfzsdfasdf"; 
arrList[intIndex++] = " adsfasdfxczvzxcvas"; 
arrList[intIndex++] = " asdfasdfxzcvzxcvaa"; 
arrList[intIndex++] = " asdfvzxcvzxcvzxcvs"; 
arrList[intIndex++] = " asdfzxcvzxcvssssss"; 
arrList[intIndex++] = " asdfxcvzxcvasdasda"; 
arrList[intIndex++] = " asdfasdvzxcvasdasd"; 
arrList[intIndex++] = " asdfxcvzxcvzasdaxc"; 
arrList[intIndex++] = " zxcvzxcvasdadazxcv"; 
arrList[intIndex++] = " fgbdfhdhasdasdasgd"; 
arrList[intIndex++] = " sdafasasdasdasadfn"; 
arrList[intIndex++] = " dzxsdfasdagsdfgcvn"; 
arrList[intIndex++] = " dhgdfhdfhdvbasdass"; 
arrList[intIndex++] = " sdfgvxcvxgagxcxcfn"; 
arrList[intIndex++] = " asdfgcxvbxasdacvbn"; 
arrList[intIndex++] = " afsdfgsdfbggsdfcvb"; 
arrList[intIndex++] = " baffaddsdfgsdfgsdg"; 
arrList[intIndex++] = " 2fda2fdsdfgsdfgscb"; 
arrList[intIndex++] = " dasddosdfgsdfgsdgn"; 

function smanPromptList(arrList,objInputId)
{ 
this.style = "background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;" 
if(arrList.constructor!=Array)
{
alert('smanPromptList初始化失败:第一个参数非数组!');
return;
}

window.onload =function() 
{ 
 arrList.sort(function(a,b)
 { 
   if(a.length>b.length)
   {
   return 1;
   } 
   else if(a.length==b.length)
   {
   return a.localeCompare(b);
   } 
   else 
   {
   return -1;
   }
}) 
var objouter=document.getElementById("__smanDisp") //显示的DIV对象 
var objInput = document.getElementById(objInputId); //文本框对象 
var selectedIndex=-1; 
var intTmp; //循环用的:) 
if (objInput==null) {alert('smanPromptList初始化失败:没有找到"'+objInputId+'"文本框');return ;} 
//文本框失去焦点 
objInput.onblur=function(){ 
objouter.style.display='none'; 
} 
//文本框按键抬起 
objInput.onkeyup=checkKeyCode; 
//文本框得到焦点 
objInput.onfocus=checkAndShow; 


function checkKeyCode()
{ 
var ie = (document.all)? true:false; 
if (ie)
{ 
var keyCode=event.keyCode; 
if (keyCode==40||keyCode==38)
{ //下上 
  var isUp=false 
  if(keyCode==40) isUp=true ; 
  chageSelection(isUp); 
}
else if (keyCode==13)
{//回车 
  outSelection(selectedIndex); 
}
else
{ 
  checkAndShow();
}
}
else
{ 
checkAndShow() 
} 
divPosition() 
} 

function checkAndShow()
{ 
var strInput = objInput.value; 
if (strInput!="")
{ 
divPosition(); 
selectedIndex=-1; 
objouter.innerHTML ="";
  
for(intTmp=0;intTmp<arrList.length;intTmp++)
{ 
for(i=0;i<arrList[intTmp].length;i++)
{  
if(arrList[intTmp].substr(i, strInput.length).toUpperCase()==strInput.toUpperCase())
{ 
addOption(arrList[intTmp],strInput); 
} 
} 
} 
objouter.style.display=''; 
}
else
{ 
  objouter.style.display='none'; 
} 

function addOption(value,keyw)
{ 
var v=value.replace(keyw,"<b><font color=red>"+keyw+"</font></b>"); 
objouter.innerHTML +="<div onmouseover=\"this.className='sman_selectedStyle'\" onmouseout=\"this.className=''\" onmousedown=\"document.getElementById('"+objInputId+"').value='" + value + "'\">" + v + "</div>"  
} 
}

function chageSelection(isUp){ 
if (objouter.style.display=='none')
{ 
objouter.style.display=''; 
}
else
{ 
if (isUp) 
{
  selectedIndex++
} 
else 
{
  selectedIndex--
} 
} 

var maxIndex = objouter.children.length-1; 

if (selectedIndex<0)
{
selectedIndex=0
} 

if (selectedIndex>maxIndex) 
{
selectedIndex=maxIndex
} 

for (intTmp=0;intTmp<=maxIndex;intTmp++)
{ 
if (intTmp==selectedIndex)
{ 
  objouter.children[intTmp].className="sman_selectedStyle"; 
}
else
{ 
  objouter.children[intTmp].className=""; 
} 
} 
}

function outSelection(Index)
{ 
objInput.value = objouter.children[Index].innerText; 
objouter.style.display='none'; 
} 

function divPosition()
{ 
objouter.style.top =getAbsoluteHeight(objInput)+getAbsoluteTop(objInput); 
objouter.style.left =getAbsoluteLeft(objInput);  
objouter.style.width=getAbsoluteWidth(objInput) 
}

}

document.write("<div id='__smanDisp' style='position:absolute;display:none;" + this.style + "' onbulr> </div>"); 
document.write("<style>.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>"); 

function getAbsoluteHeight(ob)
{ 
return ob.offsetHeight 
}

function getAbsoluteWidth(ob)
{ 
return ob.offsetWidth 
}

function getAbsoluteLeft(ob)
{ 
var s_el=0;
el=ob;
while(el)
{
s_el=s_el+el.offsetLeft;
el=el.offsetParent;
}; 
return s_el 
} 

function getAbsoluteTop(ob)
{ 
var s_el=0;el=ob;
while(el)
{
s_el=s_el+el.offsetTop ;
el=el.offsetParent;}; 
return s_el; 
} 
} 
smanPromptList(arrList,"inputer") 
</script> 

<table>
<tr>
<td> 
<input type="text" id="inputer">
</td>
</tr>
</table>

</BODY>
</HTML>

#6

代码可以直接运行,,,
arrList[intIndex++] = " asdvasdvzxcvasdfwe";  
arrList[intIndex++] = " aasdxzcvzxcvaaasdd";  
arrList[intIndex++] = " zxcv zc vfzsdfasdf";  
arrList[intIndex++] = " adsfasdfxczvzxcvas";  
arrList[intIndex++] = " asdfasdfxzcvzxcvaa";  
arrList[intIndex++] = " asdfvzxcvzxcvzxcvs";  
arrList[intIndex++] = " asdfzxcvzxcvssssss";  
arrList[intIndex++] = " asdfxcvzxcvasdasda";  
arrList[intIndex++] = " asdfasdvzxcvasdasd";  
arrList[intIndex++] = " asdfxcvzxcvzasdaxc";  
arrList[intIndex++] = " zxcvzxcvasdadazxcv";  
arrList[intIndex++] = " fgbdfhdhasdasdasgd";  
arrList[intIndex++] = " sdafasasdasdasadfn";  
arrList[intIndex++] = " dzxsdfasdagsdfgcvn";  
arrList[intIndex++] = " dhgdfhdfhdvbasdass";  
arrList[intIndex++] = " sdfgvxcvxgagxcxcfn";  
arrList[intIndex++] = " asdfgcxvbxasdacvbn";  
arrList[intIndex++] = " afsdfgsdfbggsdfcvb";  
arrList[intIndex++] = " baffaddsdfgsdfgsdg";  
arrList[intIndex++] = " 2fda2fdsdfgsdfgscb";  
arrList[intIndex++] = " dasddosdfgsdfgsdgn";  
这些是暂假设数据库有的数据,,只要输入类似a   则可以出现GOOGLE效果

#7

这个例子比较简单明了吧
<!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="">   
  <style>   
  body,div   {   
  font-family:verdana;   
  line-height:100%;   
  font-size:9pt;   
  }   
  input   {   
  width:300px;   
  }   
  h1   {   
  text-align:center;   
  font-size:2.2em;   
  }   
  #divf   {   
  margin:10px;   
  font-size:0.8em;   
  text-align:center;   
  }   
  #divc   {   
  border:1px   solid   #333333;   
  }   
  .des   {   
  width:500px;   
  background-color:lightyellow;   
  border:1px   solid   #333;   
  padding:20px;   
  margin-top:20px;   
  }   
  .mouseover   {   
  color:#ffffff;   
  background-color:highlight;   
  cursor:default;   
  }   
  .mouseout   {   
  color:#000000;   
  background-color:#ffffff;   
  cursor:default;   
  }   
  </style>   
  <SCRIPT   LANGUAGE="JavaScript">   
  <!--   
    
  function   jsAuto(instaceName,objID)   
  {   
  this._msg   =   [];   
  this._o   =   document.getElementById(   objID   );   
  if   (!this._o)   return;   
  this._f   =   null;   
  this._i   =   instaceName;   
  this._r   =   null;   
  this._v   =   null;   
  this._o.style.visibility   =   "hidden";   
  this._o.style.lineHeight   =   "120%";   
  this._o.style.position   =   "absolute";   
  this._o.style.zIndex   =   "9999";   
  return   this;   
  };   
    
  //   mouseEvent.   
  jsAuto.prototype.domouseover=function(obj)   
  {   
  obj.tagName=="DIV"   ?   obj.className="mouseover"   :   obj.parentElement.className="mouseover";   
  };   
  jsAuto.prototype.domouseout=function(obj)   
  {   
  obj.tagName=="DIV"   ?   obj.className="mouseout"   :   obj.parentElement.className="mouseout";   
  };   
  jsAuto.prototype.doclick=function(msg)   {   with   (this)   
  {   
  if(_r)   
  {   
  _r.value   =   msg;   
  _o.style.visibility   =   "hidden";   
  }   
  else   
  {   
  alert("javascript   autocomplete   ERROR   :\n\n   can   not   get   return   object.");   
  return;   
  }   
  }};   
    
  //   object   method;   
  jsAuto.prototype.item=function(msg)   
  {   
  if(   msg.indexOf(",")>0   )   
  {   
  var   arrMsg=msg.split(",");   
  for(var   i=0;   i<arrMsg.length;   i++)   
  {   
  arrMsg[i]   ?   this._msg.push(arrMsg[i])   :   "";   
  }   
  }   
  else   
  {   
  this._msg.push(msg);   
  }   
  this._msg.sort();   
  };   
  jsAuto.prototype.append=function(msg)   {   with   (this)   
  {   
  _i   ?   ""   :   _i   =   eval(_i);   
  var   div   =   document.createElement("DIV");   
    
  //bind   event   to   object.   
  div.onmouseover   =   function(){_i.domouseover(this)};   
  div.onmouseout   =   function(){_i.domouseout(this)};   
  div.onclick   =   function(){_i.doclick(msg)};   
  var   re     =   new   RegExp("("   +   _v   +   ")","i");   
  div.className   =   "mouseout";   
  if   (_v)   div.innerHTML   =   msg.replace(re   ,   "<strong>$1</strong>");   
  div.style.fontFamily   =   "verdana";   
    
  _o.appendChild(div);   
  }};   
  jsAuto.prototype.display=function()   {   with(this)   
  {   
  if(_f)   
  {   
  _o.style.left   =   _r.offsetLeft;   
  _o.style.width   =   _r.offsetWidth;   
  _o.style.top   =   _r.offsetTop   +   _r.offsetHeight;   
  _o.style.visibility   =   "visible";   
  }   
  else   
  {   
  _o.style.visibility="hidden";   
  }   
  }};   
  jsAuto.prototype.handleEvent=function(fValue,fID)   {   with   (this)   
  {   
  var   re;   
  _f   =   false;   
  _r   =   document.getElementById(   fID   );   
  _v   =   fValue;   
  _i   =   eval(_i);   
  re   =   new   RegExp("^"   +   fValue   +   "",   "i");   
    
  if(   fValue==""   )   return;   
  _o.innerHTML="";   
    
  for(var   i=0;   i<_msg.length;   i++)   
  {   
  if(re.test(_msg[i]))   
  {   
  _i.append(_msg[i]);   
  _f   =   true;   
  }   
  }   
    
  _i   ?   _i.display()   :   alert("can   not   get   instance");   
  }};   
  window.onerror=new   Function("return   true;");   
  //-->   
  </SCRIPT>   
  </HEAD>   
    
  <BODY>   
  <div   id="divc">   
  <!--this   is   the   autocomplete   container.-->   
  </div>   
  <h1>Autocomplete   Function</h1>   
  <div   align="center">   
  <input   onkeyup="jsAutoInstance.handleEvent(this.value,'auto')"   id="auto">   
  </div>   
  <div   id="divf">   
 
  </div>   
    
  <SCRIPT   LANGUAGE="JavaScript">   
  <!--   
  var   jsAutoInstance   =   new   jsAuto("jsAutoInstance","divc");   
  jsAutoInstance.item("a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start");   
  jsAutoInstance.item("blueDestiny");   
  jsAutoInstance.item("BlueMiracle,Blue");   
  jsAutoInstance.item("angela,geniuslau");   
  jsAutoInstance.item("never-online");   
  //-->   
  </SCRIPT>   
  </BODY>   
  </HTML>  

#8

来学习

#9

可以去这里找
http://country.lvyou168.cn/flashwariii/download.htm

#10

http://blog.csdn.net/sandyxxx/archive/2008/02/03/2079690.aspx

一个例子，参考一下

#11



var DIV_HIGHLIGHT_COLOR = "#C30";

var DIV_BG_COLOR = "#EEE";


//Gets the browser specific XmlHttpRequest Object

function getXmlHttpRequestObject() {

	if (window.XMLHttpRequest) {

		return new XMLHttpRequest();

	} else if(window.ActiveXObject) {

		return new ActiveXObject("Microsoft.XMLHTTP");

	} else {

		alert("Your Browser Sucks!\nIt's about time to upgrade don't you think?");

	}

}

function createAjaxObj(){

  var httprequest=false

  if (window.XMLHttpRequest)

  { // if Mozilla, Safari etc

    httprequest=new XMLHttpRequest()

    if (httprequest.overrideMimeType)

      httprequest.overrideMimeType('text/xml')

   }

   else if (window.ActiveXObject)

   { // if IE

     try {

       httprequest=new ActiveXObject("Msxml2.XMLHTTP");

     }

     catch (e){

       try{

          httprequest=new ActiveXObject("Microsoft.XMLHTTP");

       }

       catch (e){}

     }

   }

   return httprequest

}

//Our XmlHttpRequest object to get the auto suggest

var searchReq = createAjaxObj();


//Called from keyup on the search textbox.

//Starts the AJAX request.

function searchSuggest() {

	if (searchReq.readyState == 4 || searchReq.readyState == 0) {

		var str = escape(document.getElementById('txtSearch').value);

		searchReq.open("GET", 'Search.aspx?search=' + str, true);

		searchReq.onreadystatechange = handleSearchSuggest; 

		searchReq.send(null);

	}		

}


//Called when the AJAX response is returned.

function handleSearchSuggest() {

	if (searchReq.readyState == 4) {

		var ss = document.getElementById('search_suggest')

		ss.style.cursor = "pointer";

		ss.innerHTML = '';

		var str = searchReq.responseText.split("\n");

		        		for(i=0; i < str.length - 1; i++) {

			//Build our element string.  This is cleaner using the DOM, but

			//IE doesn't support dynamically added attributes.

			var suggest = '<div onmouseover="javascript:suggestOver(this);" ';

			suggest += 'onmouseout="javascript:suggestOut(this);" ';

			suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';

			suggest += 'class="suggest_link">' + str[i] + '</div>';

			ss.innerHTML += suggest;


		}



	}

}


//Mouse over function

function suggestOver(div_value) {

	div_value.className = 'suggest_link_over';

}

//Mouse out function

function suggestOut(div_value) {

	div_value.className = 'suggest_link';

}

//Click function

function setSearch(value) {

	document.getElementById('txtSearch').value = value;

	document.getElementById('search_suggest').innerHTML = '';

}


function getDiv (divID)

{

	if (!globalDiv)

	{

		// 如果div在页面中不存在,创建一个新的div


		if (!document.getElementById(divID))

		{

			var newNode = document.createElement("div");

			newNode.setAttribute("id", divID);

			document.body.appendChild(newNode);

		}


		// globalDiv设置为div的引用		

		globalDiv = document.getElementById(divID);


		// 计算div左上角的位置		

		var x = queryField.offsetLeft;

		var y = queryField.offsetTop + queryField.offsetHeight;

		var parent = queryField;

		while (parent.offsetParent)

		{

			parent = parent.offsetParent;

			x += parent.offsetLeft;

			y += parent.offsetTop;

		}


		// 如果没有对div设置格式,则为其设置相应的显示样式		

		if (!divFormatted)

		{

			globalDiv.style.backgroundColor = DIV_BG_COLOR;

			globalDiv.style.fontFamily = DIV_FONT;

			globalDiv.style.padding = DIV_PADDING;

			globalDiv.style.border = DIV_BORDER;

			globalDiv.style.width = "100px";

			globalDiv.style.fontSize = "90%";


			globalDiv.style.position = "absolute";

			globalDiv.style.left = x + "px";

			globalDiv.style.top = y + "px";

			globalDiv.style.visibility = "hidden";

			globalDiv.style.zIndex = 10000;


			divFormatted = true;

		}

	}


	return globalDiv;

}


function keypressHandler ()

{

	// 获取对下拉区的引用		

	//var div = getDiv(divName);

	var div = document.getElementById('search_suggest');


	// 如果下拉区不显示,则什么也不做		

//	if (div.style.visibility == "hidden")

//	{

//		return true;

//	}


	// 确保evt是一个有效的事件	

	if (window.event)

	{

		evt = window.event;

	}

	var key = evt.keyCode;


	var KEYUP = 38;

	var KEYDOWN = 40;

	var KEYENTER = 13;

	var KEYTAB = 9;


	// 只处理上下键、回车键和Tab键的响应		

	if ((key != KEYUP) && (key != KEYDOWN) && (key != KEYENTER) && (key != KEYTAB))

	{

		return true;

	}


	var selNum = getSelectedSpanNum(div);

	var selSpan = setSelectedSpan(div, selNum);


	// 如果键入回车和Tab,则选择当前选择条目	

	if ((key == KEYENTER) || (key == KEYTAB))

	{

		if (selSpan)

		{

			_selectResult(selSpan);

		}

		evt.cancelBubble = true;

		return false;

	}

	else //如果键入上下键,则上下移动选中条目

	{

		if (key == KEYUP)

		{

			selSpan = setSelectedSpan(div, selNum - 1);

		}

		if (key == KEYDOWN)

		{

			selSpan = setSelectedSpan(div, selNum + 1);

		}

		if (selSpan)

		{

			_highlightResult(selSpan);

		}

	}


	// 显示下拉区

	//showDiv(true);

	return true;

}


function getSelectedSpanNum(div)

{

	var count = -1;

	var spans = div.getElementsByTagName("div");

	if (spans)

	{

		for (var i = 0; i < spans.length; i++)

		{

			count++;

			if (spans[i].style.backgroundColor != div.style.backgroundColor)

			{

				return count;

			}

		}

	}


	return -1;

	//return count;

}


function setSelectedSpan(div, spanNum)

{

	var count = -1;

	var thisSpan;

	var spans = div.getElementsByTagName("div");

	if (spans)

	{

		for (var i = 0; i < spans.length; i++)

		{

			if (++count == spanNum)

			{

				highlightResult(spans[i]);

				thisSpan = spans[i];

			}

			else

			{

				_unhighlightResult(spans[i]);

			}

		}

	}


	return thisSpan;

}



function highlightResult()

{

	_highlightResult(this);

}


function _highlightResult(item)

{

	item.style.backgroundColor = DIV_HIGHLIGHT_COLOR;

}





    <title>Untitled Page</title>


    <script type="text/javascript" src="Search.js"></script>


    <style type="text/css" media="screen">

        body

        {

            font: 11px arial;

        }

        .suggest_link

        {

            background-color: #FFFFFF;

            padding: 2px 6px 2px 6px;

        }

        .suggest_link_over

        {

            background-color: #E8F2FE;

            padding: 2px 6px 2px 6px;

        }

        #search_suggest

        {

            position: absolute;

            background-color: #FFFFFF;

            text-align: left;

            border: 1px solid #000000;

        }

    </style>

</head>

<body>

    <div style="width: 500px;">

        <form id="frmSearch" action="" runat="server">

        <input type="text" id="txtSearch" name="txtSearch" alt="Search Criteria" onkeyup="searchSuggest();" autocomplete="off" />

        <asp:Button ID="cmdSearch" runat="server" Text="Search" 

            UseSubmitBehavior="False" /><br />

            <div id="search_suggest">

            </div>

        </form>

    </div>




    string ConCtosProd = ConfigurationManager.ConnectionStrings["con"].ConnectionString;

    protected void Page_Load(object sender, EventArgs e)

    {

        string Str = Request.QueryString["search"].ToString();

        string Results = SearchOrder(Str.Trim().ToString());

        Response.Write(Results);

        Response.End();

    }



    private string SearchOrder(string searchStr)

    {

        string OrderStr;

        string Result = string.Empty;

        OrderStr = "your SQL"

        using (SqlConnection Con = new SqlConnection(ConCtosProd))

        {

            using (SqlCommand Cmd = new SqlCommand(OrderStr, Con))

            {

                Con.Open();

                using (SqlDataReader Dr = Cmd.ExecuteReader())

                {

                    if (Dr.HasRows)

                    {

                        while (Dr.Read())

                        {

                            Result += Convert.ToString(Dr["Company_Name"]) + "\n";


                        }

                    }


                }

            }

        }

        return Result;

    }

}


#12

看看这个http://blog.csdn.net/familyx/archive/2008/02/05/2084513.aspx

#13

http://blog.csdn.net/familyx/archive/2008/02/05/2084513.aspx

#14

有可以跑起来的吗？

#15

征服Ajax--Web 2.0开发技术详解
代码可以去人民邮电出版社的网站下!

#16

学习..

#17

不明LZ在说什么

#18

什么呀
标签：

相关文章