存档

文章标签 ‘自动完成’

简单模拟google输入自动完成

2008年3月28日 編程·程序設計 1,034 views
没有评论

昨晚看到景圳的QQ空间里一篇关于用JS控制DIV显示位置的文章，想到自己之前写订餐系统时的一个模拟Google输入自动完成的方法，于是也想整理出来。之前本BLOG转来的一篇文章比我这个方法更完善点，详细见：用AJAX实现google输入自动完成的简单模拟。本文介绍的这种方法也是用AJAX来实现，没做太多的注释，不过都蛮容易看懂的。 下面先看截图： 实现方法： JS <script language=“javascript” type=“text/javascript”> var oLeft=0,oTop=0,oWidth=0,oHeight=0; var oLeft1=180,oTop1=220,oWidth1=100; var disStr_TrueName; var thisInput_TrueName; var thisInputValue_TrueName; var username=“”; //获取坐标输入框的坐标 function getAbsPoint() { e = document.getElementById(“ctl00$ContentPlaceHolder1$txtUserName”); var x   =   e.offsetLeft,   y   =   e.offsetTop; while(e=e.offsetParent) { x   +=   e.offsetLeft; y   +=   e.offsetTop; } oLeft1=x; oTop1=y+20; } //输入框内容改变触发事件 function showUserInfo_TrueName_List_callBack() { txtAuthor=document.getElementById(“ctl00$ContentPlaceHolder1$txtUserName”); username=txtAuthor.value; thisInputValue_TrueName=username; //通过AJAX读取数据库获取信息 AjaxMethod.getUserInfoByTrueName(username,getUserInfoByTrueName_CallBack); } //构造信息内容 function getUserInfoByTrueName_CallBack(response) { if (response.value != null) { var ds = response.value; try{ if(ds != [...]

, , ,

用AJAX实现google输入自动完成的简单模拟

2008年1月5日 編程·程序設計 1,153 views
没有评论

比较简单的模拟,文本框输入CompanyName,然后 搜索SqlServer2000 里NorthWind数据库 Suppliers表的CompanyName字段, 然后实现自动完成 四个文件 1 .AutoComplete.htm XML/HTML代码 <!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>       <title>输入自动完成</title>       <script language="javascript">           //输入信息的文本框            var txtInput;            //下拉表当前选中项的索引             var currentIndex = -1;                        //初始化参数,和下拉表位置            function initPar()            {                 txtInput = document.getElementById("txtCompanyName");                 //设置下拉表 相对于 文本输入框的位置                  setPosition();            }                         //设置下拉表 相对于 文本输入框的位置            function setPosition()            {                var width = txtInput.offsetWidth;                var left = getLength("offsetLeft");                var top = getLength("offsetTop") + txtInput.offsetHeight;                               divContent.style.left = left + "px"; [...]

, ,