首页  ·  知识 ·  云计算
类似GOOGLE输入框的自动提示框控件
drummery  http://www.msproject.cn/  综合  编辑:dezai  图片来源:网络
"COLOR: green">【简介】zichun写的Auto-complete control(http://www.codeproject.com/jscript/jsactb.asp)在
【简介】

zichun写的Auto-complete control(http://www.codeproject.com/jscript/jsactb.asp)在过去两年里已经得到了广泛的流传。自动完成功能(也称为自动提示)大大提升了网站的易用性,丰富了用户体验。不幸的是,原作者已经放弃了代码支持,在过去的日子里已经不再给我回信。而且,在过去一年里,自动完成功能已经有了另外的一个需求:AJAX支持。
类似GOOGLE的自动提示框


这篇文章的诞生是为了解决所以脚本问题,并提供用户支持。修改的部分有:

1. 脚本同时支持脱机offline模式(通过客户端数组)和在线online模式(通过AJAX)的提示框
2. 脚本100%支持当前主要的浏览器(Mozilla/Firefox, Opera, Safari, MS IE)
3. 脚本移到一个文件里
4. 修改了内存泄露问题


【安装】

1. 你需要把 autosuggest.js, arrow-down.gif, arrow-down-d.gif, arrow-up.gif 和 arrow-up-d.gif 这几个文件上传到你的服务器上。接下来假设,我们有一个简单的HTML页面:

Code:

   

                    style='font-family:verdana;width:300px;font-size:12px'
            id='tb' value=''/>

   



2. 引用autocomplete.js文件

Code:

   

       

   

...



3. 初始化自动提示控件

Code:
    style='font-family:verdana;width:300px;font-size:12px'
    id='tb' value=''/>

   



4. 如果你希望使用静态客户端数组:

4.1 在HEAD中创建它

Code:


   

   
        var customarray =
            new Array('apple','alligator','banana','elephant',
            'pear','kingbird','kingbolt', 'kingcraft','kingcup',
            'kingdom','kingfisher',);

   



4.2 作为第二个参数传给actb对象

Code:



4.3 确保位于autosuggest.js文件开始位置的suggesturl变量为空


5. 如果你希望通过AJAX显示提示信息,在autocomplete.js中修改:

5.1 设置suggesturl变量的值为一个服务器上的脚本路径,用以得到数据
5.2 找到下面的代码:

Code:
http.open("GET", suggesturl + "?str=" + ot_, true);



改成你需要的

【提示】

当你在本地测试的时候,Mozilla/Firefox浏览器会因为一些安全的原因不允许你做AJAX查询。需要在autosuggest.js中加入下面的话:

Code:
/*try
{
    netscape.security.PrivilegeManager.enablePrivilege(
        "UniversalBrowserRead");
} catch (e) { }*/
本文作者:drummery 来源:http://www.msproject.cn/
CIO之家 www.ciozj.com 微信公众号:imciow
   
免责声明:本站转载此文章旨在分享信息,不代表对其内容的完全认同。文章来源已尽可能注明,若涉及版权问题,请及时与我们联系,我们将积极配合处理。同时,我们无法对文章内容的真实性、准确性及完整性进行完全保证,对于因文章内容而产生的任何后果,本账号不承担法律责任。转载仅出于传播目的,读者应自行对内容进行核实与判断。请谨慎参考文章信息,一切责任由读者自行承担。
延伸阅读