JQuery实现文本框自动补全

最新推荐文章于 2023-06-07 08:32:59 发布

彦雷

最新推荐文章于 2023-06-07 08:32:59 发布

阅读量197

点赞数

分类专栏： JQuery 文章标签： jQuery Firefox C# C C++ ViewUI

JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

[color=blue]采用JQuery和.net中的一般处理程序实现文本框的简单自动补全，键盘控制功能暂无！[/color]

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

[color=blue]test.css文件[/color]


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;

}

[color=blue]test.js文件[/color]

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键）
}

[color=blue]test.ashx一般处理程序文件[/color]


<%@ 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;
        }
    }

}

彦雷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现文本框自动补全

[color=blue]采用JQuery和.net中的一般处理程序实现文本框的简单自动补全，键盘控制功能暂无！[/color][code="html"] 自动补全自动补全： [/code][col...
复制链接

扫一扫