我想自动填充效果大家都见怪不怪了吧,其实要想实现自动填充效果,只要将当前输入的数据取出然后实时去数据库进行模糊匹配(不区分大小写并且将字符转换成对象数据找)就可以实现了,那就要时间当我们按下键盘时去触发时间并得到返回的集合进行页面的回显,我们也可以用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>
分享到:
相关推荐
基于JS的超轻量级聊天软件。前端:vue3.0、element plus、electron、TypeScript 实现的 PC&Web版聊天程序,主要适用于私有云项目内部聊天,企业内部管理通讯等功能,主要通讯协议websocket。支持web网页聊天实现。 ...
超轻量级(约600字节)jQuery插件,可为iOS和Android上的Bootstrap3轮播启用滑动手势_JavaS.zip
一个超轻量级的 jQuery 插件,用于使用 CSS3 Transforms 拖动元素。 这个插件的目标不是替代 jQuery UI 的可拖动,而是一个最小的插件,使某些元素在页面上可拖动,即模式窗口。 用法 $ ( '.my-modal-window' ) . ...
jQuery Shortcuts 是个超轻量级的方法,使用 jQuery 来绑定快捷键(热键)。 标签:jquery
轻量级密码present密码学超轻量级密码——present
delphi 超轻量级写日志单元源码 引用本单元即可使用 一共四个方法 procedure log4error(msg: AnsiString); //写ERROR级别的日志 procedure log4info(msg: AnsiString); //写INFO级别的日志 procedure log4debug...
ThickBox 是用超轻量级的 jQuery 库 编写的. 压缩过 jQuery 库只15k, 未压缩过的有39k. ThickBox 的 JavaScript 代码和 CSS 文件只占12k. 所以压缩过的 jQuery 代码和 ThickBox 总共只有27k. ThickBox 能重新调整...
Chyrp是一个在被设计为很轻量级但保持了功能性的博客引擎。它是PHP和MySQL驱动的,(有一些Ajax的东西),使用了一个很小的模板和模块引擎。所以你可以按你的要求改造它。
超轻量级中文OCR(Optical Character Recognition,光学字符识别)模型指的是在计算资源要求很低的情况下,能够对中文文本进行准确识别的OCR模型。以下是一个可能的超轻量级中文OCR总模型的一般组成: 1. **预处理*...
guice超轻量级依赖注入用了才知道是爽
超轻量级 JavaScript 横向动态菜单代码 , 只有1kb,作为菜单或者图片展示都非常好用。
DLProgressHUD 自定义超轻量级HUD
超轻量级CMS | 仅384 Kb大小适用于SQLite,MSSQL,MySQL和PostgreSQL的现代,超轻量级和火箭快速内容管理系统。(php5.4+mysql)
EasyLogger(https://github.com/armink/EasyLogger)是一款超轻量级(ROM, RAM)、高性能的C日志库,非常适合对资源敏感的软件项目,例如:IoT产品、可穿戴设备、智能家居等等。相比log4c、zlog这些知名的C日志库,...
超轻量级JS弹层,多种动画效果,兼容到IE6
超轻量级gif屏幕录像,全免费,比屏幕专家好多了
nodejs基于excel.js实现超轻量级报表源码
NULL 博文链接:https://deng19891006.iteye.com/blog/935333
发布一个超轻量级的体绘制代码包,尽管代码量非常小,目前只实现了一个基于CPU的等值面光线投射和一个基于CUDA的等值面光线投射,但这也正是它的优点,从这个代码您可以看到一个基本的体绘制引擎是如何从最底层一...
一款超轻量级通用人脸检测模型(模型文件大小仅1MB,320x240输入下计算量仅90MFlops)适用于边缘计算设备、低算力设备以及PC