只要将当前输入的数据取出然后实时去数据库进行模糊匹配(不区分大小写并且将字符转换成对象数据找)就可以实现了,那就要时间当我们按下键盘时去触发时间并得到返回的集合进行页面的回显,我们也可以用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>
分享到:
相关推荐
**jQuery仿百度自动提示**是一种常见的前端开发技术,主要用于实现搜索框或输入框中的自动补全功能,提高用户输入效率和用户体验。这个技术基于JavaScript库jQuery,通过监听用户输入,实时从服务器或本地数据中匹配...
同时,可以监听鼠标事件,当用户选择某个关键词时,自动填充到搜索框并隐藏下拉列表。 总结,实现“jQuery仿百度搜索框下拉热门关键词列表代码”涉及到的关键技术包括jQuery库的应用、HTML结构设计、CSS美化、事件...
**jQuery仿百度搜索技术解析** 在网页开发中,提供用户友好的搜索体验是至关重要的,而百度搜索的自动匹配功能就是一个很好的例子。本教程将深入探讨如何使用jQuery库来实现类似百度搜索的功能,通过JSON数据交互,...
本项目“jquery仿百度下拉列表搜索框”旨在利用jQuery的功能,模仿百度搜索引擎的智能下拉列表功能,提供用户友好的模糊查询体验。 首先,我们要了解jQuery的核心概念。jQuery通过一种简化的语法,使开发者可以更...
创建一个仿百度、谷歌的自动补全插件涉及HTML、CSS和JavaScript(主要是jQuery)的综合运用。关键在于监听输入事件,动态获取和展示建议,以及优化用户体验。通过这样的插件,可以极大地提升网站或应用的搜索效率,...
本教程将详细讲解如何使用jQuery技术来实现一个仿百度登录窗口的弹出及可拖动效果,旨在提供一种简单、直观且易于实施的解决方案。 首先,jQuery是一个强大的JavaScript库,它简化了HTML文档遍历、事件处理、动画...
总结来说,"jQuery Autocomplete 仿百度搜索 只能搜索提示"是一个基于jQuery UI和ASP.NET的实时搜索提示系统,它通过前后端的配合,实现了类似百度和Google搜索的自动补全功能。这个项目不仅提供了代码实现,还包含...
《jQuery仿百度搜索框下拉代码详解》 在网页设计中,用户交互体验的重要性不言而喻,其中搜索框的设计尤为关键。一个优秀的搜索框不仅要有简洁明了的界面,还需要具备良好的用户体验,如自动补全、下拉提示等功能。...
在本教程中,我们将探讨如何使用Asp.Net后端配合jQuery和Ajax技术来实现类似百度搜索栏的自动填充功能。 首先,我们需要了解基础概念: 1. **Ajax(Asynchronous JavaScript and XML)**:异步JavaScript和XML,是...
总结来说,通过使用jQuery,我们可以轻松实现一个仿百度搜索框的效果,包括自动提示功能和简洁的样式设计。这只是一个基础示例,实际应用中可能需要连接到服务器获取实时的搜索建议,并对样式进行更多自定义以满足...
标题中的“autocomplete实现百度搜索自动填充特效”是指在网页中实现类似于百度搜索框的自动完成功能,这种功能能够根据用户输入的字符实时提供匹配的建议列表,提高用户的输入效率和搜索体验。在Web开发中,这是一...
【标题】"仿百度自动搜索控件,自动搜索"是一个基于jQuery和jQuery.autocomplete插件的Web应用程序,它旨在实现类似百度搜索引擎的自动提示功能。这个控件可以在用户输入关键词时,实时显示与输入匹配的搜索建议,...
本篇文章将详细讲解如何利用jQuery实现一个文本框输入自动提示的功能,这一功能常见于搜索引擎,如百度搜索框,当用户在输入框中键入文字时,系统会实时提供相关的搜索建议。 一、基本原理 自动提示功能的核心是...
【标题】"仿百度自动完成sql2000"是一个基于SQL Server 2000的项目,旨在实现类似于百度搜索框的智能提示功能。在Web开发中,这种功能通常称为“自动完成”或“自动填充”,它提升了用户体验,使得用户在输入查询时...
同时,当用户点击列表中的某一项时,可以自动填充到搜索框并触发搜索。 ```css #suggestions li { cursor: pointer; } #suggestions li:hover { background-color: #f0f0f0; } ``` ```javascript $("#...
6. **用户体验优化**:为了提升用户体验,可以利用jQuery实现一些额外功能,比如自动聚焦输入框、预填充默认值、错误提示等。 在"jiaoben8240"这个压缩包文件中,可能包含了实现以上功能的HTML、CSS和JavaScript...
本示例“JavaWeb ajax异步自动填充信息”是一个典型的Ajax应用,模拟了搜索引擎如百度在用户输入时自动填充建议的功能。 首先,我们需要理解Ajax的工作原理。Ajax的核心是XMLHttpRequest对象,它允许JavaScript在...
在本项目中,我们主要探讨如何使用jQuery库来实现一个类似于百度自动下拉查询功能的HTML电话簿。jQuery是一个高效、简洁且强大的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。在这个例子...