脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → AutoComplete 自动完成

十分钟打造AutoComplete自动完成效果代码

 更新时间：2009年12月26日 23:37:53   作者：  
十分钟打造山寨版谷歌AutoComplete，因为是十分钟打造出来的，所以只考虑表面效果，其他全部忽略，绝对的山寨。
.老生常谈---XmlHttpRequest
代码
复制代码 代码如下:

var xmlHttp;
function createXmlHttpRequest()
{
if(window.ActieveXObject)
{
xmlHttp=new ActieveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
{
xmlHttp=new XMLHttpRequest();
}
}

如果不用Jquery手写javascript，上面要改成XmlHttpRequest对象池，这就不写了。
.触发AutoComplete函数
代码
复制代码 代码如下:

function $E(argument)
{
return document.getElementById(argument);
}

function GetInfo(e)
{
var input=$E("Text1").value;
if(input.length<=0)
{
changeDisplay();
}
else
{
createXmlHttpRequest();
var keyword=e.value;

xmlHttp.onreadystatechange=readyStateChangeHandle;
var url="AutoComplete.ashx?keyword="+keyword+"&timeStamp="+new Date().getTime();
xmlHttp.open("GET",url,true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xmlHttp.send(null);
}
}

这里服务器后台是在.NET平台下的xxx.ashx一般处理程序响应客户端得请求，当然也可以用webserviece或者aspx.cs或WCF来响应客户端得请求，但是需要注意的是webservice响应客户端必须遵循遵循soap协议（当然也可以通过修改配置文件让webservice响应get或post请求），xxx.ashx和aspx.cs响应客户端要遵循http协议。当然后台也可以PHP或JAVA等。
.鼠标move变色
复制代码 代码如下:

function changecolor(event)
{

event.style.background="#00FFFF";

}
function changebackcolor(event)
{
event.style.background="#FFFFFF"
}


.选区隐藏与出现
代码
复制代码 代码如下:

function ChangeDivDisplay(e)
{
document.getElementById("Text1").value=e.firstChild.data;
var html="";
document.getElementById("searchResult").innerHTML=html;
document.getElementById("searchResult").style.visibility="hidden";
}

function changeDisplay()
{
var html="";
document.getElementById("searchResult").innerHTML=html;
document.getElementById("searchResult").style.visibility="hidden";
}

.回调函数
代码
复制代码 代码如下:

function readyStateChangeHandle()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{

if(xmlHttp.responseText!="]")
{
var resultDiv=$E("searchResult");

var josnStr=eval('('+xmlHttp.responseText+')');
var html="";

for (var key in josnStr)
{

html+= "<span onmousemove=\"changecolor(this)\" onclick=\"ChangeDivDisplay(this)\" onmouseout=\"changebackcolor(this)\" style=\"width: 195px; text-align: left; background-color: #FFFFFF; display: block; cursor: default;\">"+josnStr[key].bookName +"<span style=\" color: #008000; float: right;\">"+josnStr[key].bookCount+"本书</span></span>";

}
html+= "<span style=\" width: 195px; background-color: #FFFFFF; display: block;\"><a href=\"javascript:changeDisplay()\" style=\"float: right;\">关闭</a></span>";

resultDiv.innerHTML=html;
document.getElementById("searchResult").style.visibility="visible";
}
else
{
changeDisplay();
}
}
}
}

这里我用的是json,当然也可以用XML或者字符串。

相关文章

  • 值得收藏的八个常用的js正则表达式

    值得收藏的八个常用的js正则表达式

    这 开发中如果有input输入框，难免就要写正则表达式，因此在这里总结了一些常见常用的正则表达式的书写方法,需要的朋友可以参考下
    2018-10-10
  • js window.print实现打印特定控件或内容

    js window.print实现打印特定控件或内容

    window.print可以打印网页，但有时候我们只希望打印特定控件或内容，怎么办呢？可以把要打印的内容放在div中，然后用下面的代码进行打印，希望对大家有所帮助
    2013-09-09
  • Javascript中parseInt的正确使用方式

    Javascript中parseInt的正确使用方式

    今天小编就为大家分享一篇关于Javascript中parseInt的正确使用方式，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2018-10-10
  • JavaScript调用客户端的可执行文件(示例代码)

    JavaScript调用客户端的可执行文件(示例代码)

    这篇文章主要是对JavaScript调用客户端的可执行文件(示例代码)进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • js获取电脑分辨率的思路及操作

    js获取电脑分辨率的思路及操作

    用户要求不同的分辨率，弹出窗口的位置不同，下面是本文的一些想法，并附有示例，喜欢的朋友可以收藏下
    2013-11-11
  • Bootstrap实现模态框效果

    Bootstrap实现模态框效果

    这篇文章主要为大家详细介绍了Bootstrap实现模态框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-09-09
  • JS如何将当前日期或指定日期转时间戳

    JS如何将当前日期或指定日期转时间戳

    这篇文章主要介绍了js将当前日期或指定日期转时间戳超详细,通过实例代码介绍了JS时间戳转换方式，需要的朋友可以参考下
    2023-05-05
  • 小程序实现计时器小功能

    小程序实现计时器小功能

    这篇文章主要为大家详细介绍了小程序实现计时器小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-09-09
  • Bootstrap每天必学之简单入门

    Bootstrap每天必学之简单入门

    相信大家阅读了Bootstrap第一篇文章后，对Bootstrap充满了探索欲望，小编也对Bootstrap产生了兴趣，所以今天再整理一篇关于Bootstrap的入门介绍，希望大家喜欢。
    2015-11-11
  • iframe src为图片时的高度自适应的代码

    iframe src为图片时的高度自适应的代码

    iframe src为图片时的高度自适应的代码...
    2007-10-10

最新评论