借用
http://www.lioil.net/lbs/article.asp?id=448的例子,再加以完善
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>");
分享到:
相关推荐
【标题】"仿谷歌搜索提示"的实现与详解 在IT行业中,用户界面的友好性和易用性至关重要,其中搜索提示功能就是一个典型的例子。"仿谷歌搜索提示"是指模仿谷歌搜索引擎在用户输入关键字时,实时显示相关搜索建议的...
仿谷歌搜索提示功能源码 源码描述: 此源码仿谷歌搜索提示功能 利用了AjaxControlToolkit.dll控件的autocompleteextender 当用户在搜索框输入信息时,程序会自动从数据库检索信息 无刷新方式显示在输入框下方,提示...
【Ajax仿Google搜索提示Asp数据库版】是一个基于ASP(Active Server Pages)技术实现的搜索提示功能,旨在模仿Google搜索引擎的实时搜索建议功能。这个功能能够显著提升用户体验,当用户在搜索框输入关键词时,系统...
【Ajax仿Google搜索提示Asp数据库版 - ASP源码】是一个基于ASP技术实现的搜索提示功能,它模拟了Google搜索引擎的实时搜索建议效果。在网页中输入关键字时,该功能能够快速从数据库中检索相关数据,并实时显示为下拉...
标题中的“仿google搜索提示 SuggestFramework的使用”是指一种基于特定框架(SuggestFramework)构建的搜索提示功能,该功能模仿了Google搜索引擎在用户输入关键词时提供的实时搜索建议。这种功能可以极大地提升...
【标题】"源代码-Ajax仿google搜索提示效果 数据库版.zip" 提供了一个使用Ajax技术实现的Google搜索提示效果的实例,它基于数据库进行数据交互。Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个...
本项目“仿google搜索提示效果和省市二级联动”旨在模仿Google搜索引擎的实时搜索建议功能,并结合中国省市的二级联动选择,为用户提供更加智能化的交互体验。下面我们将深入探讨这一项目的实现原理和涉及的技术栈。...
在本案例中,“ASP源码—Ajax仿google搜索提示效果 数据库版.zip”是一个包含ASP源代码的压缩包,其目标是实现一个类似于Google搜索框的实时搜索提示功能,利用Ajax(Asynchronous JavaScript and XML)技术,用户在...
标题 "基于ASP的Ajax仿google搜索提示效果 数据库版.zip" 涉及到的是一个使用Active Server Pages (ASP)技术构建的Web应用程序,该程序旨在实现类似Google搜索的实时搜索提示功能,同时结合了Ajax(异步JavaScript和...
"弹出模态层 仿Google搜索提示(异步获取数据)"是一个典型的例子,它结合了多项技术,旨在提高用户体验,尤其是对于搜索功能的使用。这个项目的核心是利用jQuery进行异步数据获取,为用户提供即时的搜索建议,同时...
**Ajax仿Google搜索提示ASP+Access数据库版** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。Google Suggest是Google搜索引擎中的一个特性,它会在用户输入...
而实现QComboBox输入自动提示功能,可以极大地提升用户体验,类似于Google搜索框的自动完成效果。这个功能在开发过程中常用于减少用户的输入负担,提高数据选择的效率。本篇将详细介绍如何在C++中使用Qt库来实现这一...
ASP源码,压缩包解压密码:www.cqlsoft.com
ASP实现搜索框仿GOOGLE智能提示,随输入的信息智能显示相关数据
在IT行业中,搜索引擎的开发是一项复杂且技术含量高的工作,而“仿Google搜索提示”则是一种常见的用户体验优化功能。这个功能通常被称为自动补全或预测搜索,它可以在用户输入搜索关键词时提供相关的搜索建议,极大...
在许多用户界面设计中,为了提升用户体验,我们会为输入框添加自动提示功能,就像Google搜索那样,用户在输入时能实时看到匹配的建议。本教程将详细介绍如何利用`QComboBox`和`QListWidget`来实现这种输入自动提示的...
在这个实例中,Ajax主要负责在后台与服务器进行异步通信,获取搜索提示数据,然后在前端动态显示。 首先,我们需要了解ASP中的基本元素。ASP页面通常包含HTML、VBScript或JScript代码,以及可能的服务器端脚本。当...
在本项目“QCombox自动提示,仿谷歌搜索功能”中,我们将看到如何结合`QComboBox`和`QListWidget`来实现这样的效果。 首先,我们要理解`QComboBox`的基本用法。它有两个主要的组成部分:一个可编辑的文本框和一个...