一个AJAX自动完成功能的js封装源码[支持中文]第2/2页

更新时间：2007年02月28日 00:00:00 作者：

发修改整理后的代码:
1 可以自动获取焦点
2 可以进行返回值和进行相关动作
3 可以正常返回显示中文

需要解决

不能进行中文传值查询

查询界面
  <link rel="stylesheet" type="text/css" href="http://capxous.com//styles/autocomplete.css" />

<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />

<script type="text/javascript" src="http://capxous.com/javascripts/prototype.js"></script>
<script type="text/javascript" src="http://capxous.com/javascripts/autocomplete.js"></script>

</head>

<body><div id="container">

<h1 align="center" id="logo"><a href="/" title="Home"></a></h1>

<hr class="low" />

  <style>
input {
width: 180px;
}
table.th_right th {
text-align: right;
background:#fff;
}
</style>

<style>
#flag_tbl td {
padding:0.1em;
}
</style>

<h4>Demo 1: Wikipedia live search</h4>

<input name="wiki" type="text" size="30" />

<div id="wiki_link"></div>
输入2 可以看到中文结果

<script>
new CAPXOUS.AutoComplete("flag", function() {
                return "/flag1.php?typing=" + this.text.value;
        });

        new CAPXOUS.AutoComplete("cia", function() {
                return "/agency.php?q=" + this.text.value;
        });

        new CAPXOUS.AutoComplete("city", function() {
                return "/world.php?q=" + this.text.value;
        });

        function setSelectionRange(input, selectionStart, selectionEnd) {
                if (input.setSelectionRange) {
                        input.setSelectionRange(selectionStart, selectionEnd);
                } else if (input.createTextRange) {
                        var range = input.createTextRange();
                        range.collapse(true);
                        range.moveEnd('character', selectionEnd);
                        range.moveStart('character', selectionStart);
                        range.select();
                }
        }

        function update(object, value) {
                object.text.value = value;
                var index = value.toLowerCase().indexOf(object.value.toLowerCase());
                if (index > -1) {
                        setSelectionRange(object.text, index + object.value.length, value.length);
                }
        }

        new CAPXOUS.AutoComplete("wiki", function() {
                return "autocomplete3.asp?typing=" + escape(this.text.value);
                setRequestHeader("Content-Type","application/x-www-form-urlencoded")
        });
</script>

</body>
</html>

asp文件负责连接数据库并返回值

复制代码代码如下:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> 
<%Response.ContentType = "text/html" 
Response.Charset = "GB2312"   '解决乱码问题 

    Dim Conn,ConnectString 
    ConnectString="Driver={Sql Server};uid=sq_dd;Database=sq_dd;PWD=ddd;server=(local)" 
'数据库连接文件 
    Conn.Open ConnectString 
%> 


<% 



    typing =trim(Request.QueryString("typing")) 

    if (request("typing")="") then 
        page = 0 
    else  
        page= request("page") 

    pageSize = 8 
    end if 
if typing<>"" then 
Set Rs=Conn.ExeCute("SELECT YGBH,DW,YGXM FROM wuhen_t_yg WHERE ygxm LIKE '%"&typing&"%' ORDER BY ygbh DESC") 
do while not rs.eof 
%> 
<div onselect='$("wiki_link").innerHTML = "http://en.wikipedia.org//wiki/B-36_2075"' onfocus='update(this, "<%= rs(0) %>")'> 
    <span class='informal'><%= rs(1) %></span> 
    <%= rs(2) %> 
</div> 
<% 
rs.movenext 
loop 
rs.close 
set rs=nothing  
%> 
<%if typing="2" then  %> 
<div onselect='$("wiki_link").innerHTML = "http://en.wikipedia.org//wiki/B-36_2075"' onfocus='update(this, "中国")'> 
    <span class='informal'> 中文显示</span> 
     中文显示 
</div> 
<% end if %>   

上一页 12阅读全文

您可能感兴趣的文章:

一个AJAX自动完成功能的js封装源码[支持中文]

php ajax无刷新上传图片实例代码
将index.html和upload.php文件保存到支持php的空间的同级目录，测试运行即可
2008-09-09
ajax跨域访问报错501的解决方法
这篇文章主要为大家详细介绍了ajax跨域访问报错501的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
关于异步请求ajax原理以及原生Ajax、$.ajax的基本使用详解
这篇文章主要介绍了关于异步请求ajax原理以及原生Ajax、$.ajax的基本使用详解,ajax现在是前后端交互的重要工具，可以说，只要从事于it行业，ajax那就是必须要掌握的一名技术，下面我们就来对ajax进行介绍,需要的朋友可以参考下
2023-05-05
理解jquery ajax中的datatype属性选项值
jquery中ajax的dataType属性用于指定服务器返回的数据类型，如果不指定，jQuery 将自动根据HTTP包MIME信息来智能判断，如果datatype选项不填写的话，会将返回的数据当成字符串处理。
2015-10-10
Ajax异步检查用户名是否存在
这篇文章主要为大家详细介绍了Ajax异步检查用户名是否存在的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
Ajax标签导航效果(仿网易首页)
Ajax标签导航效果(仿网易首页)...
2006-10-10
Ajax实现城市二级联动（三）
这篇文章主要为大家详细介绍了Ajax实现城市二级联动的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
使用Ajax或Easyui等框架时的Json-lib的处理方案
这篇文章主要介绍了使用ajax或easyui等框架时的Json-lib的处理方案 ,需要的朋友可以参考下
2017-06-06
AJAX实现注册验证用户名
这篇文章主要为大家详细介绍了AJAX实现注册验证用户名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-03-03
Ajax获取页面被缓存的解决方法
常利用AJAX写一些页面无刷新的内容获取页面，这种方式很快捷也很方便，但其中有一个问题，就是如果两次提交的参数相同时，返回的内容只返回上次获取的内容，如果我们在第一次修改了参数，第二次再次调用却会发现页面根本没有改变。
2008-09-09