jQuery炫酷的可伸缩搜索框插件jquery.searchMeme.js

使用方法：

引入jQuery库文件、插件JS文件和CSS样式文件

<link href="css/demo.css" rel="stylesheet" type="text/css" />
<link href="css/searchMeme.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript">script>
<script src="js/jquery.searchMeme.js" type="text/javascript">script>

插件初始化和配置（演示内容的三种配置）

$(document).ready(function () {
	var searchOrange = $('#search-orange').searchMeme({ onSearch: function (searchText) {
		setTimeout(function () {
			searchOrange.searchMeme({ searchComplete: true });
			$('#search-results').html("You searched for " + searchOrange.val() + "");
			$('.panel').animate({ 'height': 200 }, 500);
		}, 3000);
	}
	, buttonPlacement: 'left', button: 'orange'
	});
	var searchGreen = $('#search-green').searchMeme({ onSearch: function (searchText) {
		setTimeout(function () {
			searchGreen.searchMeme({ searchComplete: true });
			$('#search-results').html("You searched for " + searchGreen.val() + "");
			$('.panel').addClass('go-green').animate({ 'height': 200 }, 500);
		}, 3000);
	}
	, buttonPlacement: 'right', button: 'green'
	});
	var searchRed = $('#search-red').searchMeme({ onSearch: function (searchText) {
		setTimeout(function () {
			searchRed.searchMeme({ searchComplete: true });
			$('#search-results').html("You searched for " + searchRed.val() + "");
			$('.panel').animate({ 'height': 200 }, 500, function () {
				alert('This is demo 3');
			});
		}, 3000);
	}
	, buttonPlacement: 'left', button: 'red'
	});
	$('.wrapper-green,.wrapper-red').css('display', 'none');
	$('a').click(function () {
		$('.panel').removeClass('go-green');
		$('.wrapper-orange,.wrapper-green,.wrapper-red').css('display', 'none');
		if ($(this).attr('class') == 'search-orange')
			$('.wrapper-orange').css('display', '');
		else if ($(this).attr('class') == 'search-green')
			$('.wrapper-green').css('display', '');
		else if ($(this).attr('class') == 'search-red')
			$('.wrapper-red').css('display', '');
		$('.panel').html('Search results here...').animate({ 'height': 100 }, 500);
		return false;
	});
});

html部分（非常简单）

<input type="text" id="search-orange" />
<input type="text" id="search-green" />
<input type="text" id="search-red" />