采用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文本框联想补全自动完成插件”的工作原理、实现方式以及如何进行二次修改，旨在为有需求的开发者提供深入的理解和实践指导。 一、jQuery自动完成插件基础 jQuery是一款广泛使用的...
本篇文档主要介绍了使用jQuery技术实现电子邮箱地址自动补全功能的相关代码实现方法，内容涵盖了jQuery的鼠标事件处理以及字符操作技巧，对于希望在网页中实现邮箱地址自动补全功能的开发者来说，具有一定的参考价值...
- **Autocomplete Mixin**：提供自动补全功能。 - **Zone 组件**：实现局部刷新，提高用户体验。 - **更新多个Zone**：一次请求更新多个页面区域，减少服务器负载。 ##### 4.5 Spring 集成 - **Tapestry IoC**：...
qt 一个基于Qt Creator（qt,C++）实现中国象棋人机对战.
热带雨林自驾游自然奇观探索
冰川湖自驾游冰雪交融景象
C51 单片机数码管使用 Keil项目C语言源码
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
前端分析-2023071100789s12
Laz_制作了一些窗体和对话框样式.7z
1、文件内容：ocaml-docs-4.05.0-6.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/ocaml-docs-4.05.0-6.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、更多资源/技术支持：公众号禅静编程坊
学习笔记-沁恒第六讲-米醋
工业机器人技术讲解【36页】
内容概要：本文档详细介绍了在 CentOS 7 上利用 Docker 容器化环境来部署和配置 Elasticsearch 数据库的过程。首先概述了 Elasticsearch 的特点及其主要应用场景如全文检索、日志和数据分析等，并强调了其分布式架构带来的高性能与可扩展性。之后针对具体的安装流程进行了讲解，涉及创建所需的工作目录，准备docker-compose.yml文件以及通过docker-compose工具自动化完成镜像下载和服务启动的一系列命令；同时对可能出现的问题提供了应对策略并附带解决了分词功能出现的问题。 适合人群：从事IT运维工作的技术人员或对NoSQL数据库感兴趣的开发者。 使用场景及目标：该教程旨在帮助读者掌握如何在一个Linux系统中使用现代化的应用交付方式搭建企业级搜索引擎解决方案，特别适用于希望深入了解Elastic Stack生态体系的个人研究与团队项目实践中。 阅读建议：建议按照文中给出的具体步骤进行实验验证，尤其是要注意调整相关参数配置适配自身环境。对于初次接触此话题的朋友来说，应该提前熟悉一下Linux操作系统的基础命令行知识和Docker的相关基础知识
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
网络小说的类型创新、情节设计与角色塑造
毕业设计_基于springboot+vue开发的学生考勤管理系统【源码+sql+可运行】【50311】.zip 全部代码均可运行，亲测可用，尽我所能，为你服务； 1.代码压缩包内容 代码：springboo后端代码+vue前端页面代码 脚本：数据库SQL脚本 效果图：运行结果请看资源详情效果图 2.环境准备： - JDK1.8+ - maven3.6+ - nodejs14+ - mysql5.6+ - redis 3.技术栈 - 后台：springboot+mybatisPlus+Shiro - 前台：vue+iview+Vuex+Axios - 开发工具: idea、navicate 4.功能列表 - 系统设置：用户管理、角色管理、资源管理、系统日志 - 业务管理：班级信息、学生信息、课程信息、考勤记录、假期信息、公告信息 3.运行步骤： 步骤一：修改数据库连接信息（ip、port修改） 步骤二：找到启动类xxxApplication启动 4.若不会，可私信博主！！！
在智慧城市建设的大潮中，智慧园区作为其中的璀璨明珠，正以其独特的魅力引领着产业园区的新一轮变革。想象一下，一个集绿色、高端、智能、创新于一体的未来园区，它不仅融合了科技研发、商业居住、办公文创等多种功能，更通过深度应用信息技术，实现了从传统到智慧的华丽转身。 智慧园区通过“四化”建设——即园区运营精细化、园区体验智能化、园区服务专业化和园区设施信息化，彻底颠覆了传统园区的管理模式。在这里，基础设施的数据收集与分析让管理变得更加主动和高效，从温湿度监控到烟雾报警，从消防水箱液位监测到消防栓防盗水装置，每一处细节都彰显着智能的力量。而远程抄表、空调和变配电的智能化管控，更是在节能降耗的同时，极大地提升了园区的运维效率。更令人兴奋的是，通过智慧监控、人流统计和自动访客系统等高科技手段，园区的安全防范能力得到了质的飞跃，让每一位入驻企业和个人都能享受到“拎包入住”般的便捷与安心。 更令人瞩目的是，智慧园区还构建了集信息服务、企业服务、物业服务于一体的综合服务体系。无论是通过园区门户进行信息查询、投诉反馈，还是享受便捷的电商服务、法律咨询和融资支持，亦或是利用云ERP和云OA系统提升企业的管理水平和运营效率，智慧园区都以其全面、专业、高效的服务，为企业的发展插上了腾飞的翅膀。而这一切的背后，是大数据、云计算、人工智能等前沿技术的深度融合与应用，它们如同智慧的大脑，让园区的管理和服务变得更加聪明、更加贴心。走进智慧园区，就像踏入了一个充满无限可能的未来世界，这里不仅有科技的魅力，更有生活的温度，让人不禁对未来充满了无限的憧憬与期待。
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。