jQuery过滤筛选显示数量的搜索框【原创】

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入两个必要的CSS样式文件，代码如下：

<link type="text/css" rel='stylesheet prefetch' href='css/jquery-ui.css'>
<link type="text/css" rel="stylesheet" href="css/style.css"/>

页面的body部分，需设置好输入框和列表内容，代码如下：

<div class="deco topdeco">
	<span></span>
	<span></span>
	<span></span>
	<span></span>
</div>

<h1>jQuery过滤筛选显示数量的搜索框</h1>
<h3>简单、易用、方便、快捷</h3>

<section class="list-wrap">
  <label for="search-text">搜索列表内容</label>
  <input type="text" id="search-text" placeholder="美食大搜索" class="search-box">
  <span class="list-count"></span>
	<ul id="list">
	  <li class="in">苹果派</li>
	  <li class="in">南瓜派</li>
	  <li class="in">香蕉奶油派</li>
	  <li class="in">桃黑莓馅饼</li>
	  <li class="in">巧克力草莓蛋糕</li>
	  <li class="in">巧克力南瓜蛋糕</li>
	  <li class="in">巧克力和薄荷控</li>
	  <li class="in">红丝绒蛋糕</li>
	  <li class="in">非水果樱桃</li>
	  <span class="empty-item">无数据</span>
	</ul>
</section>

页面的底部，需引入jQuery库、jQuery UI库和必要的index.js文件，代码如下：

<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src='js/jquery-ui.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>