第一种：
效果如下：
<head>
<title></title>
<style type="text/css">
#autoCompleteWp
{
border: 1px solid #ddd;
padding: 20px;
margin: 100px auto;
width: 300px;
position: relative;
}
#datalist
{
position: absolute;
left: 0;
top: 56px;
background: #f8f8f8;
z-index: 2;
border: 1px solid #FCC;
padding: 15px;
display: none;
}
#datalist li
{
line-height: 1.6;
list-style: none;
cursor: pointer;
}
.on
{
background: #06C;
color: #fff;
}
</style>
</head>
<body>
<div id="autoCompleteWp">
请输入邮箱：<br />
<input id="autoComplete" type="text" />
<ul id="datalist">
</ul>
</div>
<script type="text/javascript">
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
var Class = {
create: function () {
return function () { this.initialize.apply(this, arguments); }
}
}
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
function removeEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.removeEventListener) {
oTarget.removeEventListener(sEventType, fnHandler, false);
} else if (oTarget.detachEvent) {
oTarget.detachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = null;
}
}
String.prototype.trim = function () {
return this.replace(/^\s+|\s+$/g, '');
}
//自动完成类
var autoComplete = Class.create();
autoComplete.prototype = {
initialize: function (obj, databox, data) {
_this = this;
this.input = $(obj);
this.data = data;
this.index = 0;
this.datalist = $(databox).getElementsByTagName('li');
addEventHandler(this.input, 'keyup', this.writting);
},
writting: function (e) {
var e = e || window.event;
var keyCode = e.keyCode || e.charCode; //兼容ie firefox等事件
switch (keyCode) {
case 38: //上
_this.index--;
if (_this.index < 0) {
_this.index = $('datalist').getElementsByTagName('li').length - 1
}
if ($('datalist').getElementsByTagName('li').length > 0) {
for (var k = 0; k < $('datalist').getElementsByTagName('li').length; k++) {
$('datalist').getElementsByTagName('li')[k].className = ''
}
}
$('datalist').getElementsByTagName('li')[_this.index].className = "on";
break;
case 40:
_this.index++;
if (_this.index > $('datalist').getElementsByTagName('li').length - 1) {
_this.index = 0;
}
if ($('datalist').getElementsByTagName('li').length > 0) {
for (var k = 0; k < $('datalist').getElementsByTagName('li').length; k++) {
$('datalist').getElementsByTagName('li')[k].className = ''
}
}
$('datalist').getElementsByTagName('li')[_this.index].className = "on"
break;
//回车
case 13:
_this.input.value = $('datalist').getElementsByTagName('li')[_this.index].innerHTML.replace(/<\/?strong>/gi, '') //获取html，正则过滤标签，只取其值
$('datalist').style.display = 'none'
break;
default:
var temp = [];
var val = _this.input.value.trim();
if (val == '') {
$('datalist').style.display = 'none'
return;
}
//如果输入字符包含\会导致正则表达式出错，转换成\\即可 [ ] 等也需要转义
if (val.indexOf('\\') != -1) {
val = val.replace(/\\/g, '\\\\')
}
var reg = new RegExp('^(' + val + ')');
//利用正则把匹配到的数据 加入数组
for (var i = 0; i < _this.data.length; i++) {
//如果匹配到
if (reg.test(_this.data[i])) {
thedata = _this.data[i].replace(reg, '<strong>$1</strong>'); //利用js正则式中replace中的占位符特性
temp.push('<li title="' + i + '">' + thedata + '</li>')
}
else {
$('datalist').style.display = 'none'
}
}
//如果匹配到数据
if (temp.length > 0) {
$('datalist').innerHTML = temp.join('');
$('datalist').style.display = 'block';
var li = $('datalist').getElementsByTagName('li');
li[0].className = "on";
_this.index = 0;
for (var i = 0; i < li.length; i++) {
li[i].onmouseover = function () {
for (var i = 0; i < li.length; i++) {
li[i].className = '';
}
this.className = 'on';
_this.index = this.getAttribute('title');
}
//鼠标点击
li[i].onclick = function () {
_this.input.value = this.innerHTML.replace(/<\/?strong>/gi, '') //获取html，正则过滤标签，只取其值
$('datalist').style.display = 'none'
}
}
}
else {
$('datalist').innerHTML = '';
}
break;
}
}
}
var data = ['yaofjaa@vip.qq.com', 'yaojaa008@163.com', 'yaojaa@yahoo.com', 'yaoj4aa@sohu.com.com', 'yaojaa@vipf.qq.com', 'yfaojaa@163.com', 'yaojfaa@sina.com', 'yaojaa@yahoo.com', 'yaojaa@sohu.com']
var auto = new autoComplete('autoComplete', 'datalist', data)
</script>
</body>
</html>
第二种：
效果如下：
//显示搜索下拉选择项
function showTips(searchInput) {
var top = searchInput.offsetTop+32;
var left = searchInput.offsetLeft;
var width = searchInput.offsetWidth;
var ulStringFormat = "<li onclick='selectOption(this)' onmouseover='javascript:this.style.backgroundColor=\"#A9A9A9\"' onmouseout='javascript:this.style.backgroundColor=\"#666666\"' style='width:220px;height:25px;background-color: #666666;display:block;'><span style='float:left;text-indent:6px'>" + $("#searchvalue").val() + "</span><span id='{0}' style='float:right;padding-right:1px;fond-size:10px;'>{1}</span></li>";
while (searchInput = searchInput.offsetParent) {
top += searchInput.offsetTop;
left += searchInput.offsetLeft;
}
if ($("#searchvalue").val().length > 0) {
$("#searchTips").css({ "left": left + "px", "top": top + "px" }).show();
$("#searchTips>ul").empty().append(kendo.format(ulStringFormat, "sFlightNo","航班号")).append(kendo.format(ulStringFormat, "sTailNo", "机号"));
}
else {
searchInputBlur();
}
}
function fillvalue(value) {
alert($(value).find("span:first").html());
searchInputBlur();
}
function searchInputBlur() {
$("#searchTips").hide();
}
function selectOption(li) {
$("#hidSearchOption").val(($(li).find("span:last").attr("id")));
searchInputBlur();
}
//搜索
function searchContent() {
var url = "/Manager/DutyManager?BeginTime=" + getTodayBeginUTCTime() + "&EndTime=" + getTodayEndUTCTime()
var option = $("#hidSearchOption").val();
var value = $("#searchvalue").val().trim();
switch (option) {
case "sFlightNo":
url += "&FlightNo=" + value;
break;
case "sTailNo":
url += "&TailNo=" + value;
default:
}
openWindow(url);
}
- 大小: 10.8 KB
- 大小: 5.5 KB
分享到：
相关推荐
两项功能：一是搜索框提示，二是查询结果以异步传输技术返回，显示在DIV标签里。对了，网了说了，这个程序是电话查询的，你下载回去，改进改进，可做成搜索程序。这个程序，你用了，也会说好的，因为在网上，实在找...
**jQuery实现AJAX搜索框下拉提示小插件——jSuggest** 在Web开发中，为了提高用户体验，经常需要在用户输入时实时显示搜索建议。jQuery是一个轻量级的JavaScript库，提供了丰富的API来简化DOM操作，事件处理以及...
模仿谷歌搜索框中输入下拉提示(自动补全)功能，访问数据库调去数据，内有数据库SQL文件，数据库JDBC连接方式,记得填写正确的username="" password="" 在tomcat 的lib文件夹中 中导入mysql 驱动包【mysql包文件夹中有...
在JavaFX中，实现百度文本框的下拉提示功能，主要涉及到的是文本输入与实时匹配的概念，这在很多用户界面中都有广泛的应用，如搜索引擎、输入法等。这个功能能够提高用户体验，帮助用户快速找到他们可能正在寻找的...
**jQuery仿搜索引擎搜索框下拉提示代码详解** 在网页开发中，为了提升用户体验，经常会使用类似于搜索引擎的搜索框，提供下拉提示功能。这个功能可以让用户在输入时快速找到并选择他们想要搜索的关键词，无需完整...
本文将深入探讨“jQuery搜索框插件下拉菜单选择代码”这一主题，帮助开发者理解如何利用jQuery实现搜索框与下拉菜单的交互功能，包括多选条件和搜索功能。 首先，我们要了解这个插件的基本工作原理。当用户在输入框...
总结来说，"js带搜索框的下拉列表"是通过JavaScript和可能的库（如jQuery）实现的一种增强型用户界面组件。它涉及DOM操作、事件处理、数据过滤以及界面更新等多个技术环节，提升了用户在海量选项中的查找效率。在...
又一个搜索框下拉提示插件及JSP例子，功能就不多说了，也就是在用户输入的时候，搜索框会列出相关内容项，自动匹配用户的输入，像百度搜索的下拉提示一样，本例基于Ajax技术，JSP源代码来自国外网站。
js实现input输入框输入信息后出现下拉选择框，下拉框的数据源可以使根据输入的值从数据库中动态获取
本项目是将jQuery与Bootstrap结合，实现一个搜索框输入文字时显示下拉提示菜单的特性，即`autocomplete`功能。 `autocomplete`功能通常用于提高用户体验，当用户在搜索框中输入文字时，系统会根据已有的数据提供...
本示例中的"jQuery仿百度搜索框下拉代码"是利用jQuery实现的一种常见用户界面功能，它模仿了百度搜索引擎的搜索框下拉提示功能。这种功能提高了用户体验，让用户可以更快捷地找到并输入想要搜索的关键词。 首先，...
在搜索下拉菜单提示的场景中，JavaScript监听用户的输入事件，当用户在搜索框中输入时，触发Ajax请求。 **三、创建Ajax请求** 在JavaScript中，创建Ajax请求的步骤如下： 1. 创建XMLHttpRequest实例：`var xhr = ...
本文将详细讲解如何利用jQuery实现一个功能丰富的下拉搜索框，展示热门关键词并显示搜索次数。 首先，我们需要理解下拉搜索框的基本结构。一个基本的搜索框由HTML输入元素（`<input type="text">`）和一个隐藏的...
jquery.autocomplete实现搜索框下拉列表
在具体的实现上，开发者可能还会使用到一些流行的前端框架，如React、Vue或Angular，它们提供了组件化的开发模式，使得创建和管理这样的下拉提示框变得更为简便。例如，React中可以自定义一个`SuggestBox`组件，封装...
为了进一步提升用户体验，你还可以添加一些附加功能，如自动聚焦搜索框、输入提示、错误处理等。这可以通过扩展 `jQuery` 代码来实现。 通过以上步骤，你就成功地创建了一个使用 `jQuery` 和 CSS 的带模糊搜索功能...
`autofocus`属性使得页面加载后搜索框自动获取焦点，而`placeholder`则可以设置提示文本。`datalist`元素则可以用来定义一个选项列表，与`<input>`关联，当用户输入时提供自动补全建议。 接着，CSS3在设计上起着至...
《jQuery jSuggest 搜索框下拉提示小插件》 在Web开发中，提供一个交互性强、用户体验良好的搜索功能是至关重要的。jQuery jSuggest是一款小巧而强大的JavaScript插件，专为提升搜索框的用户体验而设计。它通过在...
本资源"jquery 搜索框下拉提示附用法.rar"提供了一个使用jQuery实现的搜索框下拉提示功能，其核心是基于jSuggest插件。jSuggest是一款轻量级的jQuery插件，专门用于实现输入框的自动补全和下拉提示，类似于百度搜索...
**jQuery搜索框输入文字下拉提示菜单** 在Web开发中，提供一个用户友好的搜索框是提高用户体验的关键因素之一。jQuery作为一个轻量级的JavaScript库，提供了丰富的功能和插件来帮助开发者实现这一目标。本篇文章将...