jQuery搜索框输入文字下拉提示菜单
Posted byeno
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery搜索框输入文字下拉提示菜单相关的知识，希望对你有一定的参考价值。
jQuery搜索框输入文字下拉提示菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery搜索框输入文字下拉提示菜单</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
border: none;
}
body {
font-family: "microsoft yahei" !important;
background-color: #43e4e3;
}
h2 {
display: block;
font-size: 1.3em;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: normal;
margin: 15px 0px 20px;
}
:focus {
outline: none;
}
h3 {
font-weight: normal;
text-align: center;
font-size: 2em;
text-transform: uppercase;
color: #5A0404;
margin: 30px 0px 20px;
}
#container {
width: 800px;
margin: 0 auto;
}
#search-box {
position: relative;
width: 400px;
margin: 0 auto;
display: inline;
}
.wrapper {
width: 750px;
margin: 0 auto;
}
#message {
margin-top: 40px;
margin-bottom: 50px;
font-size: 20px;
text-align: center;
}
/********************************
A jQuery plugin for search hints
Author: Lorenzo Cioni
https://github.com/lorecioni
********************************/
.autocomplete-container {
position: relative;
width: 283px;
height: 32px;
margin: 0 auto;
}
.autocomplete-input {
padding: 9px;
border-radius: 3px;
font-family: inherit;
float: left;
font-size: 1em;
border: 1px solid rgba(0, 0, 0, 0.19);
margin: 0;
}
.autocomplete-button {
font-family: inherit;
border: none;
background-color: #ff7474;
color: white;
padding: 8px;
float: left;
cursor: pointer;
border-radius: 0px 3px 3px 0px;
transition: all 0.2s ease-out 0s;
margin: 0.5px 0px 0px -1px;
}
.autocomplete-button:HOVER {
background-color: #D11E1E;
}
.proposal-box {
position: absolute;
height: auto;
border-left: 1px solid rgba(0, 0, 0, 0.11);
border-right: 1px solid rgba(0, 0, 0, 0.11);
left: 0px;
}
.proposal-list {
list-style: none;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.44);
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
}
.proposal-list li {
text-align: left;
padding: 5px;
font-family: inherit;
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
height: 25px;
line-height: 25px;
background-color: rgba(255, 255, 255, 0.8);
cursor: pointer;
}
li.proposal.selected {
background-color: rgba(175, 42, 0, 0.52);
color: white;
}
</style>
</head>
<body>
<div id="demo">
<div class="wrapper">
<h3>试试输入"百度"</h3>
<div id="search-form"></div>
<div id="message"></div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
//autocomplete.js
/**A jQuery plugin for search hints Author: Lorenzo Cioni - https://github.com/lorecioni*/
(function($) {
$.fn.autocomplete = function(params) {
//Selections
var currentSelection = -1;
var currentProposals = [];
//Default parameters
params = $.extend({
hints: [],
placeholder: 'Search',
width: 200,
height: 16,
showButton: true,
buttonText: 'Search',
onSubmit: function(text) {},
onBlur: function() {}
}, params);
//Build messagess
this.each(function() {
//Container
var searchContainer = $('<div></div>')
.addClass('autocomplete-container')
.css('height', params.height * 2);
//Text input
var input = $('<input type="text" autocomplete="off" name="query">')
.attr('placeholder', params.placeholder)
.addClass('autocomplete-input')
.css({
'width': params.width,
'height': params.height
});
if (params.showButton) {
input.css('border-radius', '3px 0 0 3px');
}
//Proposals
var proposals = $('<div></div>')
.addClass('proposal-box')
.css('width', params.width + 18)
.css('top', input.height() + 20);
var proposalList = $('<ul></ul>')
.addClass('proposal-list');
proposals.append(proposalList);
input.keydown(function(e) {
switch (e.which) {
case 38: // Up arrow
e.preventDefault();
$('ul.proposal-list li').removeClass('selected');
if ((currentSelection - 1) >= 0) {
currentSelection--;
$("ul.proposal-list li:eq(" + currentSelection + ")")
.addClass('selected');
} else {
currentSelection = -1;
}
break;
case 40: // Down arrow
e.preventDefault();
if ((currentSelection + 1) < currentProposals.length) {
$('ul.proposal-list li').removeClass('selected');
currentSelection++;
$("ul.proposal-list li:eq(" + currentSelection + ")")
.addClass('selected');
}
break;
case 13: // Enter
if (currentSelection > -1) {
var text = $("ul.proposal-list li:eq(" + currentSelection + ")").html();
input.val(text);
}
currentSelection = -1;
proposalList.empty();
params.onSubmit(input.val());
break;
case 27: // Esc button
currentSelection = -1;
proposalList.empty();
input.val('');
break;
}
});
input.bind("keyup", function(e) {
if (e.which != 13 && e.which != 27 &&
e.which != 38 && e.which != 40) {
currentProposals = [];
currentSelection = -1;
proposalList.empty();
if (input.val() != '') {
var word = "^" + input.val() + ".*";
proposalList.empty();
for (var test in params.hints) {
if (params.hints[test].match(word)) {
currentProposals.push(params.hints[test]);
var element = $('<li></li>')
.html(params.hints[test])
.addClass('proposal')
.click(function() {
input.val($(this).html());
proposalList.empty();
params.onSubmit(input.val());
})
.mouseenter(function() {
$(this).addClass('selected');
})
.mouseleave(function() {
$(this).removeClass('selected');
});
proposalList.append(element);
}
}
}
}
});
input.blur(function(e) {
currentSelection = -1;
//proposalList.empty();
params.onBlur();
});
searchContainer.append(input);
searchContainer.append(proposals);
if (params.showButton) {
//Search button
var button = $('<div></div>')
.addClass('autocomplete-button')
.html(params.buttonText)
.css({
'height': params.height + 2,
'line-height': params.height + 2 + 'px'
})
.click(function() {
proposalList.empty();
params.onSubmit(input.val());
});
searchContainer.append(button);
}
$(this).append(searchContainer);
if (params.showButton) {
//Width fix
searchContainer.css('width', params.width + button.width() + 50);
}
});
return this;
};
})(jQuery);
</script>
<script type="text/javascript">
var proposals = ['百度1', '百度2', '百度3', '百度4', '百度5', '百度6', '百度7', '呵呵呵呵呵呵呵', '百度', '新浪', 'a1', 'a2', 'a3', 'a4', 'b1', 'b2', 'b3', 'b4'];
$(document).ready(function() {
$('#search-form').autocomplete({
hints: proposals,
width: 300,
height: 30,
onSubmit: function(text) {
$('#message').html('Selected: <b>' + text + '</b>');
}
});
});
</script>
</body>
</html>
以上是关于jQuery搜索框输入文字下拉提示菜单的主要内容，如果未能解决你的问题，请参考以下文章
带有 jquery-1.4.2.min.js 的搜索框插件的多选下拉菜单