使用js实现文本框模糊查询自动提示动能
来源：互联网 发布：gamma scalping 知乎 编辑：程序博客网 时间：2024/04/28 11:37
<html>
<head>
<script language="javascript">
var intIndex=0;
arrList = new Array();
arrList[intIndex++] = "1sdfsdf.com";
arrList[intIndex++] = "a11sdafs.net";
arrList[intIndex++] = "b22dsafsdf";
arrList[intIndex++] = "c333asdfsadf";
arrList[intIndex++] = "4444dsafasdf";
arrList[intIndex++] = "我sfddsafdsaf";
arrList[intIndex++] = "121213dsafsdaf";
arrList[intIndex++] = "大43213asdfadsf";
arrList[intIndex++] = "大dsa3121dasf3";
arrList[intIndex++] = "大a213";
arrList[intIndex++] = "323313";
arrList[intIndex++] = "3213";
arrList[intIndex++] = "32213";
arrList[intIndex++] = "dsfsdddd";
arrList[intIndex++] = "ds11dfsfd";
arrList[intIndex++] = "ffdafd";
arrList[intIndex++] = "afdfd";
arrList[intIndex++] = "afd";
arrList[intIndex++] = "baffad";
arrList[intIndex++] = "2fda2fd";
arrList[intIndex++] = "dasd";
arrList[intIndex++] = "北京 BEIJING";
arrList[intIndex++] = "上海 SHANGHAI";
arrList[intIndex++] = "广州 GUANGZHOU";
arrList[intIndex++] = "深圳 SHENZHEN";
arrList[intIndex++] = "成都 CHENGDU";
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=0;
var intTmp; //循环用的:)
if (objInput==null) {alert('smanPromptList初始化失败:没有找到"'+objInputId+'"文本框');return ;}
//文本框失去焦点
objInput.onblur=function(){
objouter.style.display='none';
}
//文本框录入内容
objInput.onpropertychange=checkAndShow;
//文本框得到焦点
objInput.onfocus=checkAndShow;
//文本框按键抬起
objInput.onkeydown=checkKeyCode;
function checkKeyCode(){
if(objInput.value==""){
objouter.style.display='none';
return;
}
var ie = (document.all)? true:false;
if (ie){
var keyCode=event.keyCode;
if (keyCode==40||keyCode==38){ //下上
var isUp=keyCode==40;
chageSelection(isUp);
}else if (keyCode==13){//回车
outSelection(selectedIndex);
}
divPosition();
}
}
function checkAndShow(){
var strInput = objInput.value;
if (strInput!=""){
divPosition();
selectedIndex=0;
objouter.innerHTML ="";
//模糊查询的结果的行数,控制objouter显示
var result=0;
for (intTmp=0;intTmp<arrList.length;intTmp++){
var count=0;
for(var k =0;k<arrList[intTmp].length;k++){
if (arrList[intTmp].substr(k, strInput.length).toUpperCase()==strInput.toUpperCase()){
if(count==1)
{
break;
}
addOption(arrList[intTmp]);
count++;
result++;
}
}
}
if(result==0){
objouter.style.display='none';
}else{
objouter.style.display='';
}
}else{
objouter.style.display='none';
}
function addOption(value){
objouter.innerHTML +="<div onmouseover=/"this.className='sman_selectedStyle'/" onmouseout=/"this.className=''/" onmousedown=/"document.getElementById('"+objInputId+"').value='" + value.split(" ")[0] + "'/">" + value + "</div>"
}
return result;
}
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){
var value="";
try{
value = objouter.children[Index].innerText;
objInput.value = value.split(" ")[0];
objouter.style.display='none';
}catch(err){
}
}
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 mendingLeft = ob .offsetLeft;
while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" ){
mendingLeft += ob .offsetParent.offsetLeft;
mendingOb = ob.offsetParent;
}
return mendingLeft ;
}
function getAbsoluteTop(ob){
var mendingTop = ob.offsetTop;
while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" ){
mendingTop += ob .offsetParent.offsetTop;
ob = ob .offsetParent;
}
return mendingTop ;
}
}
smanPromptList(arrList,"inputer")
</script>
</head>
<body>
<div>
<input type="text" id="inputer">
</div>
</body>
</html>
- 使用js实现文本框模糊查询自动提示动能
- 实现google和迅雷等网站在搜索文本框中输入文字后能自动提示（模糊查询）
- input去掉自动提示动能
- js实现文本框提示
- 简单JS自动提示文本框
- JS实现在文本框输入时自动弹出相关内容提示
- 文本框+模糊查询+下拉框效果 js
- php 使用ajax文本框模糊查询
- JS实现文本框获得焦点，文本框里提示信息自动消失
- JS实现文本框获得焦点，文本框里提示信息自动消失
- 简单JS自动提示文本框 (转)
- javascript创建自动提示文本框(js笔记)
- js-grid实现模糊查询
- js前端实现模糊查询
- JAVA文本框根据输入内容自动模糊查询（动态）
- 文本框模糊查询
- AJAX实现文本框输入自动提示功能
- jquery实现文本框Email自动提示后缀
- 使用正则表达式判断合法的电话号码
- 图文介绍：Winhex的使用教程
- 面向对象编程（Object Oriented Programming，OOP，面向对象程序设计）
- .NET牛人应该知道些什么
- http://blog.pfan.cn/sword2008/29437.html
- 使用js实现文本框模糊查询自动提示动能
- http://www.cnblogs.com/flyingfish/archive/2007/06/29/800767.html
- QTE4.5中文输入法
- 连接查询（左连接，右连接... ...）
- C#与.NET程序员面试宝典
- 硬盘数据常见数据丢失的原因和恢复的方法
- linux里面C程序内存布局
- solr1.4 安装部署
- 软件工程 对话 Parnas 2010-10-11 明故宫校区12号楼一楼报告厅
