JQuery实现文本框自动补全(修改版)

最新推荐文章于 2016-12-22 10:12:28 发布

彦雷

最新推荐文章于 2016-12-22 10:12:28 发布

阅读量198

点赞数

分类专栏： JQuery 文章标签： jQuery CSS .net IIS JavaScript ViewUI

JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

[color=blue]采用JQuery和.net中的一般处理程序实现文本框的自动补全，鼠标、键盘功能齐全[/color]

<!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>
    <div id="con">
        自动补全：<input id="txt1" type="text"  CssClass ="txt1" onkeyup="findcon();"/>
    </div>
     <div id="popup">
        <ul id="con_ul"></ul>
     </div>
</body>
</html>

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

var hightlight =-1; 
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(event){
	initVars();		//初始化变量
	var myEvent = event || window.event;
	var keycode = myEvent.keyCode;   //获取键盘键值
	if ((keycode >= 65 && keycode <= 90) || keycode==8 || keycode == 46) {
		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键）
		    hightlight = -1
		}	
      }else if(keycode==38||keycode==40){  //如果输入的是向上向下

			if(keycode==38){
			//向上
			  var autoNodes = oconUl.find("li");

			   if (hightlight != -1 ){
			   	//把高亮节点恢复
			   	autoNodes.eq(hightlight).removeClass("mouseOver");
				hightlight--;
			   }else{
			   	hightlight = autoNodes.length - 1
			   }

			   if(hightlight == -1){
			   	//如果到顶 把高亮移动到最后
			   	hightlight = autoNodes.length - 1;
			   };
			   autoNodes.eq(hightlight).addClass("mouseOver");	
			}
			if(keycode==40){
			//向下
			   var autoNodes =oconUl.find("li");
			   if (hightlight != -1 ){
			   	//把高亮节点恢复
			   	autoNodes.eq(hightlight).removeClass("mouseOver");
			   }
			   hightlight++;
			   if(hightlight == autoNodes.length){
			   	//如果到顶 把高亮移动到最后
			   	hightlight = 0;
			   }
			   autoNodes.eq(hightlight).addClass("mouseOver");
			}		
		}else if (keycode==13){
			//如果输入的是回车			
			if(hightlight!=-1){
				//取出节点的内容
				var context = oconUl.find("li").eq(hightlight).text();
				clearcon();
				hightlight = -1;
				oInputField.val(context);
			}

		}
}

[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.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;
        }
    }

}