仿google搜索提示

最新推荐文章于 2021-06-04 10:59:49 发布

咖啡仔joy

最新推荐文章于 2021-06-04 10:59:49 发布

阅读量329

点赞数

分类专栏： javascript 文章标签： Google ASP.net ASP IE 中国移动

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

借用[url]http://www.lioil.net/lbs/article.asp?id=448[/url]的例子，再加以完善
1、实现了提示后数据排序的，按字符串由短至长，相同长度的按字母排序。


      findList.sort( function(a, b)
         {
           if(a.length>b.length)return 1;
           else if(a.length==b.length)return a.localeCompare(b);
           else return -1;
            });

2、实现了不分大小写字母，按字母表排序。


      findList.sort( function(a, b)
      {
       if(a.toLowerCase()>b.toLowerCase())return 1;
       else if(a.toLowerCase()<b.toLowerCase())return -1;
      else return 0;
      });

3、实现当字符串中包含有空格的情况。


        //新增了replaceAll方法
        String.prototype.replaceAll  = function(s1,s2){   
	 return this.replace(new RegExp(s1,"gm"),s2);   
           }
       value=value.replaceAll(" ", " "); //先把空格转换成html格式,显示时再转换为空格，否则当字符串中有空格的会出错
         //显示时再转为非html格式的空格
         s=s.replaceAll(" ", " ");
	 s=s.replaceAll("&", "&");

4、实现了提示下拉框显示多少条记录。


          for( var i=0;i<findList.length;i++)
          {
	   if(sum<10)//我这里赋为10条
	   {addOption(findList[i]);sum++;}
           else{break;}
	    }


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>GOOGLE</title>
</head>

<body onLoad="begin()">
<form name="search" action="" method="get"> 
<input autocomplete="off" type="text" id="wd" name="wd">
<input type="submit" value="OK">
</form>
</body>
</html>
  <script language="javascript">把js代码拷入来就行了</script>



 String.prototype.replaceAll  = function(s1,s2){   
	 return this.replace(new RegExp(s1,"gm"),s2);   
 }
var intIndex=0;var arrList = new Array();
var findList;//自动搜索到的数据
//将初始化的列表转换成数组
function dearray(str)//定义array
{
 arrList = str.split(",");
 intIndex = arrList.length;
}

//初始化下拉列表项
function begin()
{
 init();
//dearray("asp,csdn,中国,a fr,asp,a 日期,Asp.net,php,jsp,dvbbs,baidu,92mk,123cha,hao123,google,3721,123456,popasp,alimama,aku,cool");
 dearray("中国,中华人民共和国,广东省,广州,国本,aa,an,ab,ai,ac,aand,as,AE,AR,AWao,ar,al,ap.ar,aui,avf,art,acxd,aew,are,apo,a,ar,国泊,02TANDEM,1 Luv,10milligram,11days difference,1891 By Sferra,1921 Jeans,2%,21 Things I Love,2117,27 ALAMODE,291venice,2B in style,2-Biz,2K,2ME,2MEN,2ya2yao,3 POMMES,3.1 PhillipLim,39Sixtyone,3GActualwear,3-go,3onoToePyHo,3piece,3QR,4NF,5.10,591MMM,5ive Jungle,5th STREET,667,686,6ixty 8ight,7 Diamonds,77kids,7UNION,96NY,A Child Of The Jago,A Common Thread,A DEGREE FAHRENHEIT,A Detacher,A F,A LAB,A label by Luise&Franck,A M Snyder,A mina,A Peace Treaty,A&G,A.F.Vandevorst ,A.I.C,A.KURTZ,A1A,A6,AB Studio,Abahouse,ABAN,Abigail Keats,Absolutjoy,ABSORBA");
 downList(arrList,"wd");
}

function init()
{
 if(arrList.constructor!=Array)
 {
  alert("downList初始化失败:第一个参数非数组!");
  return;
 }

// arrList.sort();
/*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;
 }); */
}

function downList(arrList,objInputId)
{
 var objouter=document.getElementById("keysList"); //显示的DIV对象
 var objInput = document.getElementById(objInputId); //文本框对象
 var selectedIndex=-1;
 var intTmp; //循环用的

 if (objInput==null)
 {
  alert("downList初始化失败:没有找到"+objInputId+"文本框");
  return;
 }
 //文本框失去焦点
 objInput.onblur=function(){
  objouter.style.display="none";
 }
 //文本框按键抬起
 objInput.onkeyup=checkKeyCode;
 //文本框得到焦点
 objInput.onfocus=checkAndShow;

 //判断按下的按键
 function checkKeyCode(evt)
 {
  evt = evt || window.event;
  var keyCode = window.event ? evt.keyCode : evt.which;
  //var keyCode = String.fromCharCode(key);
  if (keyCode==40||keyCode==38)
  {//下上
   var isUp=false
   if(keyCode==40) isUp=true;
   chageSelection(isUp);
  }
  else if (keyCode==13)
  {//回车
   outSelection(selectedIndex);
  }
  else
  {checkAndShow(evt); }
  divPosition(evt);
 }
 //得到焦点显示
 function checkAndShow(evt)
 {  findList=new Array();
  var sum=0;//用于提示显示多行记录
  var strInput = objInput.value;
  if (strInput!="")
  {
   divPosition(evt);
   selectedIndex=-1;
   objouter.innerHTML ="";

   for (intTmp=0;intTmp<arrList.length;intTmp++)
   {
	 var s1=arrList[intTmp].substr(0, strInput.length).toUpperCase();
	 var s2=strInput.toUpperCase();
     if (s1==s2)
    {
        findList.push(arrList[intTmp]);
    }
   }
   //按字符串由短至长，相同长度按字母排序
 /* findList.sort( function(a, b)
 {
  if(a.length>b.length)return 1;
  else if(a.length==b.length)return a.localeCompare(b);
  else return -1;
 }); */
  //不分大小写排序
  findList.sort( function(a, b)
 {
  if(a.toLowerCase()>b.toLowerCase())return 1;
  else if(a.toLowerCase()<b.toLowerCase())return -1;
  else return 0;
 });
   for( var i=0;i<findList.length;i++)
   {
	   if(sum<10)
	   {addOption(findList[i]);sum++;}
           else{break;}
	}
   objouter.style.display="";
  }
  else
  { objouter.style.display="none"; }

  //想下拉列表里添加匹配项
  function addOption(value)
  {
   value=value.replaceAll(" ", " "); //先把空格转换成html格式,显示时再转换为空格，否则当字符串中有空格的会出错
   objouter.innerHTML +="<div onmouseover=this.className=\"sman_selectedStyle\";document.getElementById(\""+objInputId+"\").value=\"" + value + "\" onmouseout=this.className=\"\" onmousedown=document.getElementById(\""+objInputId+"\").value=\"" + value + "\">" + value + "</div>" 
  }

 }//end checkAndShow()
 function chageSelection(isUp)
 {
  if (objouter.style.display=="none")
  {objouter.style.display="";}
  else
  {
   if (isUp){selectedIndex++;}
   else{ selectedIndex--;}
  }

  var maxIndex = objouter.childNodes.length-1;
  if (selectedIndex<0){selectedIndex=0;}
  if (selectedIndex>maxIndex) {selectedIndex=maxIndex;}
  for (intTmp=0;intTmp<=maxIndex;intTmp++)
  {
   if (intTmp==selectedIndex)
   {
    objouter.childNodes[intTmp].className="sman_selectedStyle";
    //当上下键移动时，将选中的文本写到文本框中
    var s=objouter.childNodes[intTmp].innerHTML;
    s=s.replaceAll(" ", " ");
    s=s.replaceAll("&", "&");
    document.getElementById(objInputId).value=s; 
   }
   else
   {objouter.childNodes[intTmp].className=""; }
  }
 }

 function outSelection(Index)
 { 
	var s=objouter.childNodes[Index].innerHTML;
	 s=s.replaceAll(" ", " ");
	 s=s.replaceAll("&", "&");
  	objInput.value = s;
  	objouter.style.display="none";
 }

 //显示下拉列表项
 function divPosition(evt)
 {  var e = objInput;
  var ie = (document.all)? true:false
  //定义列表区在不同浏览器中的位置
  if (ie)
  { var top = 0; var left = -2;  }
  else
  { var top = 2; var left = 0; }

  while (e.offsetParent)
  {
   left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
   top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
   e = e.offsetParent;
  }

  left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
  top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
  objouter.style.top = (top + objInput.clientHeight) + "px";
  objouter.style.left = left + "px"; 
  objouter.style.width= objInput.clientWidth+1 + "px";
 }

}//end downList()

Number.prototype.NaN0 = function()
{return isNaN(this)?0:this;}

//出现光标
document.write("<div id=\"keysList\" style=\"position:absolute;display:none;background:#FFFFFF;border: 1px solid #CCCCCC;font-size:14px;cursor: default;\" onblur> </div>");
document.write("<style>.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>");