`
long546324
  • 浏览: 207045 次
  • 性别: Icon_minigender_1
  • 来自: 云南
社区版块
存档分类
最新评论

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

阅读更多
采用JQuery和.net中的一般处理程序实现文本框的自动补全,鼠标、键盘功能齐全
<!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>

test.js文件
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);
			}
			
		}
}

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;

}

test.ashx一般处理程序文件
<%@ 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;
        }
    }

}
6
4
分享到:
评论
13 楼 a535114641 2011-09-23  
挺好用的  谢谢LZ
12 楼 wgbbiao 2011-09-02  
不支持firefox
11 楼 cnuusw 2010-11-19  
win2003下测试通过,win2008下测试不通过。。楼主帮忙查查原因。
10 楼 long546324 2010-07-29  
穿过去的是中文 就是乱码怎么解决那
weiyanqing1987 写道
还得请教个问题,test.ashx 页面里面 如果穿过去的是中文 就是乱码怎么解决那


传过去之前先编码,传过去之后再解码就可以了。
9 楼 weiyanqing1987 2010-07-28  
还得请教个问题,test.ashx 页面里面 如果穿过去的是中文 就是乱码怎么解决那
8 楼 weiyanqing1987 2010-07-28  
是有个路径我写错了  大哥以后我的多多请教你
7 楼 weiyanqing1987 2010-07-28  
好用了,谢谢
6 楼 long546324 2010-07-28  
vs2005下运行可以的。
5 楼 weiyanqing1987 2010-07-28  
大哥我没有理解你的意思,多多指教
4 楼 weiyanqing1987 2010-07-28  
我使用vs2005运行不行吗
3 楼 long546324 2010-07-28  
weiyanqing1987 写道
大哥  你这个自动补全不好用啊,输入以后没有什么反应,不知道为什么,
那个一般处理程序 有什么作用   谢谢


一般处理程序是.net中的文件,这个是和.net结合的例子,所以必须在.net中或IIS下运行才能看到效果
2 楼 weiyanqing1987 2010-07-28  
大哥  你这个自动补全不好用啊,输入以后没有什么反应,不知道为什么,
那个一般处理程序 有什么作用   谢谢
1 楼 xuzhoudeliujin 2010-07-22  
  下载看看

相关推荐

    jQuery实现文本框自动补全

    jQuery Autocomplete是一款强大的JavaScript插件,它为网页中的输入框提供了自动补全功能,极大地提升了用户的交互体验。这个插件是jQuery UI库的一部分,能够帮助开发者轻松创建智能搜索或者建议输入的功能,使得...

    jquery 实现文本框自动补全

    标题中的“jQuery 实现文本框自动补全”指的是在网页中使用jQuery库来创建一个功能,当用户在输入框中输入文字时,系统会根据已有的数据源提供匹配的建议,帮助用户快速完成输入。这种功能常用于搜索引擎、表单填充...

    ajax文本框自动补全功能

    在这个场景下,"ajax文本框自动补全功能"是一个常见且实用的设计,它极大地提升了用户体验,尤其是在输入搜索关键词或者填写表单时。这种功能类似于百度搜索引擎的自动索引功能,用户在输入框中输入文字时,系统会...

    Jquery实现仿搜索引擎文本框自动补全插件

    **jQuery 实现仿搜索引擎文本框自动补全插件** 在 Web 开发中,为了提高用户体验,经常会在输入框中使用自动补全(Autocomplete)功能,就像我们在使用搜索引擎时,输入关键词后会看到下拉的建议列表。jQuery 是一...

    jQuery文本框联想补全自动完成插件

    jQuery文本框联想补全自动完成插件是一款非常实用的前端开发工具,它可以帮助开发者在网页的输入框中实现智能联想和自动补全功能。这个插件基于JavaScript库jQuery构建,因此,使用它之前需要确保项目中已经引入了...

    jQuery文本框联想补全自动完成插件.zip

    jQuery文本框联想补全自动完成插件,jQuery文本框联想补全自动完成插件,jQuery文本框联想补全自动完成插件,jQuery文本框联想补全自动完成插件,jQuery文本框联想补全自动完成插件,jQuery文本框联想补全自动完成...

    jquery文本框自动补全实例

    在这个实例中,我们将依赖jQuery的强大功能来实现文本框的自动补全。 `uuAutoComplete.js`是我们的主要脚本,它包含了自动补全功能的具体实现。这个脚本通常会包含以下关键部分: 1. **初始化设置**:创建一个函数...

    jquery文本框自动补全ajax autocomplete 完整实例

    在本文中,我们将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能,以及相关的`autocomplete`插件的完整实例。这个功能在许多Web应用程序中非常常见,它能够提高用户输入的效率和用户体验。 首先,让...

    JavaScript 文本框下拉自动补全提示

    总之,JavaScript文本框下拉自动补全提示是通过监听输入、匹配数据、展示下拉列表和响应用户选择等步骤实现的。开发者可以通过选择合适的库和自定义配置,为用户提供便捷的输入体验。在实际应用中,还需考虑性能、...

    jquery文本框自动补全完整实例 ajax autocomplete

    本实例将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能,即"autocomplete"。Ajax(Asynchronous JavaScript and XML)技术允许在不刷新整个页面的情况下与服务器进行异步数据交换,使得用户体验更加...

    jquery文本框自动补全ajax autocomplete

    `jQuery UI`是jQuery的一个扩展库,提供了一系列的用户界面组件,其中包括`Autocomplete`功能,这个功能用于实现文本框的自动补全效果。在本篇中,我们将深入探讨如何使用jQuery和jQuery UI的Autocomplete功能,以及...

    jQuery文本框自动联想补全特效.zip

    在Web开发中,提供用户友好的交互体验是至关重要的,而jQuery文本框自动联想补全特效正是实现这一目标的重要工具。这个特效允许用户在输入信息时,系统能根据已输入的部分文字提供相关的建议,极大地提高了输入效率...

    Jquery实现Google自动补全效果

    **jQuery实现Google自动补全效果** 在Web开发中,用户输入的实时提示功能,也称为自动补全(Autocomplete)或智能搜索,极大地提升了用户体验。本篇将介绍如何使用jQuery库来实现类似Google搜索那样的自动补全效果...

    jQuery实现的文本框自动联想补全特效源码.zip

    本资源"jQuery实现的文本框自动联想补全特效源码.zip"显然提供了一种利用jQuery来创建文本框自动补全功能的实现方式,这种功能在许多网页应用中都十分常见,例如搜索引擎、输入框建议和在线表单等。 自动补全功能...

    Jquery实现仿搜索引擎(百度、谷歌)文本框自动补全插件

    在本文中,我们将深入探讨如何使用jQuery来实现一个仿照百度和谷歌搜索引擎的文本框自动补全插件。这个插件的主要目标是提供用户友好的输入体验,通过预测和建议可能的搜索词来提高搜索效率。 ### jQuery简介 ...

    jQuery实现输入框自动补全邮箱提示

    本文将详细讲解如何利用jQuery实现输入框自动补全邮箱提示。 首先,我们需要理解jQuery的基本用法。jQuery是一个JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在jQuery中,我们通常通过...

Global site tag (gtag.js) - Google Analytics