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

2016-02-19 12:24 28 1 收藏

下面图老师小编跟大家分享一个简单易学的一个AJAX自动完成功能的js封装源码[支持中文]教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

【 tulaoshi.com - Web开发 】

Screenshots PaginationInternationalization Rich formatText selection



源码下载


有个问题,等高手解决,就是怎么搞都不能支持中文,不知道要改哪个地方!期待




ASP+AJAX autocompant ASP完整演示

ASP+AJAX源码下载

翻页和其他扩展功能正在完善
代码如下:

比如         new CAPXOUS.AutoComplete("wiki", function() { 
                return "autocomplete3.asp?typing=" + escape(this.text.value); 
                        }); 

那么在asp要接受值 
typing =trim(Request.QueryString("typing")) 
然后查询 
Set Rs=Conn.ExeCute("SELECT YGBH,DW,YGXM FROM wuhen_t_yg WHERE ygxm LIKE '%"&typing&"%' ORDER BY ygbh DESC") 

问题出在这,查询在地址栏目中输入值能有接过,但是ajax却不能返回值# 

代码如下:

script language="javascript" runat="server" 
function decode(str) { 
        return unescape(str); 

/script 
typing =decode(trim(Request.QueryString("typing")))


发修改整理后的代码:
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

bodydiv 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

h4Demo 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 %   

来源:http://www.tulaoshi.com/n/20160219/1600806.html

延伸阅读
标签: Web开发
New Document .autofinish{font-family:arial;font-size:12px;background:#eeeeee;border:1px solid #000000;padding:2px;color:#0000cc;} .autofinish_over{background:#C4E4FF;font-size:12px;margin:5px;color:#0000cc} .autofinish td{font-size:12px;} 双击获取值 [Ctrl+A 全选 注:如需引入外...
标签: PHP
辛苦了一下午 好在有点成就 自动登陆程序初步完成 function login($host="127.0.0.1",$msg="uname=abc&pass=psswd&op=login",$file="login.php"){      $num = strlen($msg);     $fp = fsockopen ($host, 80);     if ($fp) {  $MSGData .= "POST ".$...
标签: Web开发
自己在IE和FF试过了js代码加亮效果,用了一段别人的压缩后的代码作为例子,受限制,删了一部分。 发现错误的大虾一定要留下测试用的代码啊! 脚本之家 www.jb51.net #oTxt{ color:#333333; background-color:#f0f0f0; font-family:Courier New; font-size:12px; margin:0; line-height:13px; border-left:none; overflo...
标签: Web开发
程序代码: script type="text/javascript" function Ajax(sUrl,sRecvTyp,sQueryString,oResultFunc) { this.Url = sUrl; this.QueryString = sQueryString; this.XmlHttp = this.createXMLHttpRequest(); if (this.XmlHttp == null) { alert("erro"); return; } var objxml = this.XmlHttp; objxml.onreadystatechange = function (){Ajax.han...
标签: Web开发
贴出来与大家共勉。 先看一段代码, script var objReg = /^[a-zA-Z]{1}(:){1}$/gi; alert(objReg.test("a:"));//返回true alert(objReg.test("a:"));//返回false /script 为什么第二个test会返回false?是不是觉得奇怪。 原因我解答如下: test实际上与exec方法的执行方法是一致的,只是返回值不一样。test返...

经验教程

881

收藏

50
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部