jquery输入框自动补全

来源：互联网发布：金蝶初始数据如何录入编辑：程序博客网时间：2024/05/01 00:06

前台页a.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
    <title>自动补全</title>
    <link href="css/test.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/test.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="con">
         自动补全：<asp:TextBox ID="txt1" runat="server" CssClass ="txt1" onkeyup="findcon();"></asp:TextBox>
    </div>
     <div id="popup">
        <ul id="con_ul"></ul>
     </div>
    </form>
</body>
</html>

------css样式文件:test.css文件

body
{
   font-family:Arial;
   font-size:14px;
   padding:0px;
   margin:10px;
}
.txt1
{
     /* 用户输入框的样式 */
     width:200px;
}
#popup
{
     /* 提示框div块的样式 */
     position:absolute;
     left:80px;
     top:32px;
     width:204px;
     /*border:solid 1px black;*/
     color:#004a7e;
}

#popup.show{
     /* 显示提示框的边框 */
     border:1px solid #004a7e;
}

ul{
     list-style:none;
     margin:0px; padding:0px;
     color:#004a7e;
}

li.mouseOver{
     background-color:#004a7e;
     color:#FFFFFF;

}

---------关键JS文件:test.js

var oInputField;    //考虑到很多函数中都要使用
var oPopDiv;        //因此采用全局变量的形式
var oconUl;
function initVars(){
    //初始化变量
     oInputField = $("#txt1");
     oPopDiv = $("#popup");
     oconUl = $("#con_ul");
}
function clearcon(){
    //清除提示内容
     oconUl.empty();
     oPopDiv.removeClass("show");
}
function setcon(the_con){
    //显示提示框，传入的参数即为匹配出来的结果组成的数组
     clearcon(); //每输入一个字母就先清除原先的提示，再继续
     oPopDiv.addClass("show");
    for(var i=0;i<the_con.length;i++)
        //将匹配的提示结果逐一显示给用户
         oconUl.append($("<li>"+the_con[i]+"</li>"));
     oconUl.find("li").click(function(){
         oInputField.val($(this).text());
         clearcon();
     }).hover(
        function(){$(this).addClass("mouseOver");},
        function(){$(this).removeClass("mouseOver");}
     );
}
function findcon(){
     initVars();     //初始化变量
    if(oInputField.val().length > 0){
        //获取异步数据
        var url="handler/test.ashx?parms="+oInputField.val();
         $.get(url,function(data){
                var aResult = new Array();
                if(data.length > 0){
                     aResult = data.split(",");
                     setcon(aResult);    //显示服务器结果
                 }
                else
                     clearcon();
         });
     }
    else
         clearcon(); //无输入时清除提示框（例如用户按del键）
}

-------处理后台:test.ashx一般处理程序文件也可以直接放a.aspx.cs文件里处理

<%@ WebHandler Language="C#" Class="test" %>
using System;
using System.Web;
using System.Data;

public class test : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
         context.Response.ContentType = "text/plain";
        string str=context.Request.QueryString["parms"];
        if (str.Length == 0)
         {
            return;
         }
        string result = "";
        string[] name = new string[] { "a","b","c","d","e","f","g","a2","b2","c2","d2","e2","f2","g2","a3","b3","c3","d3","e3","f3","g3","a4","b4","c4","d4","e24","f4","g4"
         };
        for (int i = 0; i < name.Length; i++)
         {
            if (name[i].IndexOf(str) == 0)
                 result += name[i] + ",";
         }
        if (result.Length > 0)                                   //如果有匹配项
             result = result.Substring(0, result.Length - 1);    //去掉最后的“,”号
         context.Response.Write(result);
     }

    public bool IsReusable {
        get {
            return false;
         }
     }

}