采用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;
}
}
}
分享到：
相关推荐
jQuery Autocomplete是一款强大的JavaScript插件，它为网页中的输入框提供了自动补全功能，极大地提升了用户的交互体验。这个插件是jQuery UI库的一部分，能够帮助开发者轻松创建智能搜索或者建议输入的功能，使得...
标题中的“jQuery 实现文本框自动补全”指的是在网页中使用jQuery库来创建一个功能，当用户在输入框中输入文字时，系统会根据已有的数据源提供匹配的建议，帮助用户快速完成输入。这种功能常用于搜索引擎、表单填充...
在这个场景下，"ajax文本框自动补全功能"是一个常见且实用的设计，它极大地提升了用户体验，尤其是在输入搜索关键词或者填写表单时。这种功能类似于百度搜索引擎的自动索引功能，用户在输入框中输入文字时，系统会...
**jQuery 实现仿搜索引擎文本框自动补全插件** 在 Web 开发中，为了提高用户体验，经常会在输入框中使用自动补全（Autocomplete）功能，就像我们在使用搜索引擎时，输入关键词后会看到下拉的建议列表。jQuery 是一...
jQuery文本框联想补全自动完成插件是一款非常实用的前端开发工具，它可以帮助开发者在网页的输入框中实现智能联想和自动补全功能。这个插件基于JavaScript库jQuery构建，因此，使用它之前需要确保项目中已经引入了...
jQuery文本框联想补全自动完成插件，jQuery文本框联想补全自动完成插件，jQuery文本框联想补全自动完成插件，jQuery文本框联想补全自动完成插件，jQuery文本框联想补全自动完成插件，jQuery文本框联想补全自动完成...
在这个实例中，我们将依赖jQuery的强大功能来实现文本框的自动补全。 `uuAutoComplete.js`是我们的主要脚本，它包含了自动补全功能的具体实现。这个脚本通常会包含以下关键部分： 1. **初始化设置**：创建一个函数...
在本文中，我们将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能，以及相关的`autocomplete`插件的完整实例。这个功能在许多Web应用程序中非常常见，它能够提高用户输入的效率和用户体验。 首先，让...
总之，JavaScript文本框下拉自动补全提示是通过监听输入、匹配数据、展示下拉列表和响应用户选择等步骤实现的。开发者可以通过选择合适的库和自定义配置，为用户提供便捷的输入体验。在实际应用中，还需考虑性能、...
本实例将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能，即"autocomplete"。Ajax（Asynchronous JavaScript and XML）技术允许在不刷新整个页面的情况下与服务器进行异步数据交换，使得用户体验更加...
`jQuery UI`是jQuery的一个扩展库，提供了一系列的用户界面组件，其中包括`Autocomplete`功能，这个功能用于实现文本框的自动补全效果。在本篇中，我们将深入探讨如何使用jQuery和jQuery UI的Autocomplete功能，以及...
在Web开发中，提供用户友好的交互体验是至关重要的，而jQuery文本框自动联想补全特效正是实现这一目标的重要工具。这个特效允许用户在输入信息时，系统能根据已输入的部分文字提供相关的建议，极大地提高了输入效率...
**jQuery实现Google自动补全效果** 在Web开发中，用户输入的实时提示功能，也称为自动补全（Autocomplete）或智能搜索，极大地提升了用户体验。本篇将介绍如何使用jQuery库来实现类似Google搜索那样的自动补全效果...
本资源"jQuery实现的文本框自动联想补全特效源码.zip"显然提供了一种利用jQuery来创建文本框自动补全功能的实现方式，这种功能在许多网页应用中都十分常见，例如搜索引擎、输入框建议和在线表单等。 自动补全功能...
在本文中，我们将深入探讨如何使用jQuery来实现一个仿照百度和谷歌搜索引擎的文本框自动补全插件。这个插件的主要目标是提供用户友好的输入体验，通过预测和建议可能的搜索词来提高搜索效率。 ### jQuery简介 ...
本文将详细讲解如何利用jQuery实现输入框自动补全邮箱提示。 首先，我们需要理解jQuery的基本用法。jQuery是一个JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在jQuery中，我们通常通过...