存档

文章标签 ‘自动完成’

简单模拟google输入自动完成

2008年3月28日 編程·程序設計 749 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读取数据库获取信息 [...]

, , ,

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

2008年1月5日 編程·程序設計 532 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";   
            divContent.style.top = top + "px";    
            divContent.style.width = width + "px";   
        }    
           
       //获取对应属性的长度    
        function getLength(attr)   
        {   
            var offset = 0;   
            var item = txtInput;   
            while (item)   
            {   
                offset += item[attr];   
                itemitem = item.offsetParent;   
            }    
            return offset;    
        }    
  
        //自动完成   
        function autoComplete()   
        {   
            //如果按下 向上, 向下 或 回车   
            if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13)   
            {    
                //选择当前项    
                selItemByKey();   
            }    
            else //向服务器发送请求   
            {    
                //如果值为空    
                if (txtInput.value == "")   
                {   
                    divContent.style.display=‘none’;  [...]

, ,