jQuery文本框自动联想补全特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery文本框自动联想补全特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery文本框自动联想补全特效</title>
<link rel="stylesheet" href="dist/autocomplete.css">
<link rel="stylesheet" href="style.css">

<script src="dist/jquery.js"></script>
<script src="dist/autocomplete.js"></script>
<script>
    var proposals = ['at', 'boat', 'bear', 'chief', 'dog', 'drink', 'elephant', 'fruit', 'grave', 'hotel', 'illness', 'London', 'motorbike', '内容b', '内容a', '内容'];

$(document).ready(function(){
	$('#search-form').autocomplete({
		hints: proposals,
		width: 300,
		height: 30,
		onSubmit: function(text){
			$('#message').html('Selected: <b>' + text + '</b>');			
		}
	});
});
</script>

</head>

<body>
<div id="demo">
	<div class="wrapper">
		<h3>试试输入"内容"</h3>
		<div id="search-form"></div>
		<div id="message"></div>
	</div>
</div>
</body>
</html>

JS代码(autocomplete.js):

/**A jQuery plugin for search hintsAuthor:Lorenzo Cioni - https://github.com/lorecioni*/
(function($){
	$.fn.autocomplete = function(params){
	//Selectionsvar currentSelection = -1;
	var currentProposals = [];
	//Default parametersparams = $.extend({
	hints:[],placeholder:'Search',width:200,height:16,showButton:true,buttonText:'Search',onSubmit:function(text){
}
,onBlur:function(){
}
}
,params);
	//Build messagessthis.each(function(){
	//Containervar searchContainer = $('<div></div>').addClass('autocomplete-container').css('height',params.height * 2);
	//Text inputvar 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');
}
//Proposalsvar 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 arrowe.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 arrowe.preventDefault();
	if((currentSelection + 1) < currentProposals.length){
	$('ul.proposal-list li').removeClass('selected');
	currentSelection++;
	$( "ul.proposal-list li:eq(" + currentSelection + ")" ).addClass('selected');
}
break;
	case 13:// Enterif(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 buttoncurrentSelection = -1;
	proposalList.empty();
	input.val('');
	break;
}
}
);
	input.bind("change paste 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 buttonvar 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 fixsearchContainer.css('width',params.width + button.width() + 50);
}
}
);
	return this;
}
;
}
)(jQuery);

CSS代码(autocomplete.css):

@CHARSET "UTF-8";/********************************A jQuery plugin for search hintsAuthor:Lorenzo Cionihttps://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:#990101;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;}

CSS代码(style.css):

*{margin:0;padding:0;list-style:none;border:none;}
body{font-family:"microsoft yahei" !important;background-color:#FDFFE0;}
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;}

附件:下载该文件资源,减少时间成本(增值服务)