我想自动填充效果大家都见怪不怪了吧,其实要想实现自动填充效果,只要将当前输入的数据取出然后实时去数据库进行模糊匹配(不区分大小写并且将字符转换成对象数据找)就可以实现了,那就要时间当我们按下键盘时去触发时间并得到返回的集合进行页面的回显,我们也可以用jquery或者用ajax写(在jquery中有对ajax的实现而且使用起来十分方便大家应该知道ajax局部刷新吧);
下面我们就用jquery去实现自动填充数据:
首先我们先设置一下页面回显的数据的样式
#txt{
width:180px;
}
#completeDiv{
width:180px;
border:1px solid #C6C6C6;
display:none;
}
ul{
list-style: none;
margin:0px;
padding:0px;
}
li{
list-style: none;
margin:0px;
padding:2px;
font-size:12px;
}
.over{
background:#83E7AF;
color:#ffffff;
cursor: default;
}
然后我们在页面引入相应的css和js 包括相应的jquery的js
$(document).ready(function(){
var indexLi = -1;
$('#txt').keyup(function(event){
if(event.keyCode==38){ //上e
indexLi --;
if (indexLi < 0) {
indexLi = 9;
}
var li = $('li').eq(indexLi);
li.addClass('over').siblings().removeClass('over');
$('#txt').val(li.text());
}else if(event.keyCode==40){ //下
indexLi ++;
if (indexLi > 9) {
indexLi = 0;
}
var li = $('li').eq(indexLi);
li.addClass('over').siblings().removeClass('over');
$('#txt').val(li.text());
}else if(event.keyCode==27){ //ESC
$('#completeDiv').hide();
}else if(event.keyCode==13){ //回车 回车是跳到百度去了
window.location.href = "http://www.baidu.com/s?wd=" + $('#txt').val();
}else{
var t = $('#txt').val(); //文本框输入的值
// alert("123123"); //键盘按下 通过getJSON里面的连接请求相应的.do然后把当前的输入框文本传过去进行模糊匹配,并且返回相应的集合数组
$.getJSON('/shunfengcheWeb/aoutSearch.do',{"txt":t},function(data){
if(data==null){
$('#completeDiv').hide(); //层隐藏 首先我们要设置隐藏
return ;
}
$('#completeDiv').empty(); //清空层内容 当重新遍历时清空原先的数据
var ul = $('<ul></ul>');
$.each(data,function(index,item){ //遍历数据 //开始遍历数组
var li = $('<li></li>')
.text(item)
.mouseover(function(){
$(this).addClass('over')
.siblings().removeClass('over');
indexLi = index;
}).click(function(){
$('#txt').val($(this).text());
$('#completeDiv').hide();
});
ul.append(li);//创见相应的ul和li并把查询的数据复制
});
$('#completeDiv').append(ul).show(); //显示层回显到页面
});
}
});
});
页面jsp
<script type="text/javascript" src="/shunfengcheWeb/testaoutBaidu/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/shunfengcheWeb/testaoutBaidu/js/complete.js"></script>
</head>
<body>
<div>
<input type="text" id="txt"/>
<div id="completeDiv">
</div>
</div>
</body>
<!--EndFragment-->
分享到:
相关推荐
轻量级模板引擎,如Angular JS. 超轻量级前端HTML模板引擎 - 仿angularJs,支持上下文数据和事件绑定,支持循环嵌套,支持自定义
在IT行业中,自动填充数据工具通常用于测试、性能分析或者数据模拟等场景。"FillData"是这样一个专门针对Android系统的工具,它能够模仿用户的行为,填充手机内存,以帮助开发者和测试人员更好地理解和优化应用程序...
基于JS的超轻量级聊天软件。前端:vue3.0、element plus、electron、TypeScript 实现的 PC&Web版聊天程序,主要适用于私有云项目内部聊天,企业内部管理通讯等功能,主要通讯协议websocket。支持web网页聊天实现。 ...
一个超轻量级的 jQuery 插件,用于使用 CSS3 Transforms 拖动元素。 这个插件的目标不是替代 jQuery UI 的可拖动,而是一个最小的插件,使某些元素在页面上可拖动,即模式窗口。 用法 $ ( '.my-modal-window' ) . ...
delphi 超轻量级写日志单元源码 引用本单元即可使用 一共四个方法 procedure log4error(msg: AnsiString); //写ERROR级别的日志 procedure log4info(msg: AnsiString); //写INFO级别的日志 procedure log4debug...
`ThickBox`是一款基于jQuery的轻量级插件,用于实现点击图片、登录、以及其他各种弹出窗口功能。这个插件以其简洁高效的特点,在Web开发中被广泛使用。下面我们将详细探讨`ThickBox`的工作原理、核心功能以及如何在...
- **面向硬件优化的设计**:研究者回顾了DES的设计理念,并结合AES最终入围候选算法之一Serpent在硬件性能方面的优秀表现,将这些元素融合到PRESENT的设计之中。 - **避免安全性妥协**:尽管专注于硬件效率,研究...
"超轻量级gif屏幕录像"是一个专注于创建GIF格式动态图的录制工具,其特点在于轻便小巧且免费,相比其他专业屏幕录制软件,如"屏幕专家",它可能提供了更为简洁易用的解决方案。 首先,我们来理解一下GIF格式。GIF...
该插件名为"bcSwipe",是基于jQuery的一个简单但强大的解决方案。它的工作原理是监听触屏设备的触摸事件,将用户的滑动操作转化为Bootstrap轮播组件的切换命令。这样,用户只需在轮播图片上左右滑动,就能轻松地浏览...
Chyrp是一款旨在提供轻量化体验的开源博客引擎,其版本v2.5 RC1代表了这个项目在轻量级博客平台领域的最新进展。这款博客系统由PHP编程语言编写,并依赖于MySQL数据库来存储和管理内容,使得它在保证功能全面的同时...
ThickBox 是用超轻量级的 jQuery 库 编写的. 压缩过 jQuery 库只15k, 未压缩过的有39k. ThickBox 的 JavaScript 代码和 CSS 文件只占12k. 所以压缩过的 jQuery 代码和 ThickBox 总共只有27k. ThickBox 能重新调整...
总结而言,EVM作为一款超轻量级的物联网虚拟机,以其独特的设计理念和强大的功能,正在成为物联网领域的一股重要力量。它不仅解决了资源受限设备的计算需求,还为物联网应用带来了更高的灵活性和智能化程度。随着...
jQuery Shortcuts 是个超轻量级的方法,使用 jQuery 来绑定快捷键(热键)。 标签:jquery
标题中的“一款超轻量级通用人脸检测模型”是指一种专为高效运行设计的人脸检测算法,它在保持高精度的同时显著降低了模型的大小和计算需求。这种模型特别适合资源有限的设备,如边缘计算设备和低算力硬件,以及个人...
【超轻量级 JavaScript 横向动态菜单】是一种高效且节省资源的网页导航解决方案,尤其适用于对页面加载速度有高要求的项目。这个菜单仅1kb大小,却能实现丰富的交互效果,如水平滑动、展开收缩等,既能用于网站的主...
超轻量级中文OCR(Optical Character Recognition,光学字符识别)模型指的是在计算资源要求很低的情况下,能够对中文文本进行准确识别的OCR模型。以下是一个可能的超轻量级中文OCR总模型的一般组成: 1. **预处理*...
超轻量级CMS | 仅384 Kb大小适用于SQLite,MSSQL,MySQL和PostgreSQL的现代,超轻量级和火箭快速内容管理系统。(php5.4+mysql)
"ios-自定义超轻量级HUD.zip"就是这样一个例子,它提供了一种轻量级解决方案,帮助开发者快速创建自己的HUD。 这个自定义的HUD可能是用Swift或Objective-C编写,其核心功能可能包括以下几点: 1. **显示与隐藏**:...
mapfinal是基于Java语言的极速GIS基础开发框架,其核心设计目标是开发迅速、代码量少、学习简单、功能强大、量级轻、易扩展。具有高效的资源调度和渲染能力,易学自动化,能够同时评估桌面端、Web端和手机端。地图...
EasyLogger(https://github.com/armink/EasyLogger)是一款超轻量级(ROM, RAM)、高性能的C日志库,非常适合对资源敏感的软件项目,例如:IoT产品、可穿戴设备、智能家居等等。相比log4c、zlog这些知名的C日志库,...