搜索框功能前端实现

//搜索框位置

<div id="form" class="search">
</div>

 

//被搜索对象

<p>${host_name}</p>

<script type="text/javascript">
		/**
			js 搜索栏功能实现 		
		**/
		(function($) {
			jQuery.expr[':'].Contains = function(p, i, m) {
				return (p.textContent || p.innerText || "").toUpperCase()
						.indexOf(m[3].toUpperCase()) >= 0;
			};

			$(function() {
				filterList($("#form"), $("#list"));
			});

			function filterList(header, list) {
				var form = $("<form>").attr({"class" : "search","action" : "#"}),
					input = $("<input>").attr({	"class" : "searchPc","type" : "text","placeholder":"搜索"});

				$(form).append(input).appendTo(header);
				$(input).change(
						function() {
							var filter = $(this).val();//获取搜索框的值 
							if (filter) {
								$matches = $(list).find(
										'p:Contains(' + filter + ')').parent();
								$('li', list).not($matches).slideUp();//不匹配的向上滑动隐藏 
								$matches.slideDown();
							} else {
								$(list).find("li").slideDown();//滑出所有list
							}
							return false;
						}).keyup(function() {//继续输入搜索内容调动change()
					$(this).change();
				});
			}
		}(jQuery));
		
	</script>