可根据颜色排序筛选的搜索列表

一款可根据颜色排序筛选的搜索列表，可以根据预设的不同颜色对列表进行筛选，也可以根据字母的先后顺序进行排序，搜索框内输入关键词也能显示找到的列表内容。

分类：表单代码 > 搜索框难易：初级

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

页面的head部分，需远程调用bootstrap样式库和font-awesome图标字体库，并引入页面样式文件，代码如下：

<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<link rel="stylesheet" href="css/style.css">

页面的body部分，需设置好搜索框和和列表的容器等，代码如下：

<div class="container-fluid">
  <div class="row">
  
		<div class="col-xs-7 col-sm-6">
      <div class="button-group filters-button-group text-center" id="filters">
				<button class="button is-checked" data-filter="*">all</button>
			</div>
    </div>

		<div class="col-xs-2">
			<a href="#" id="quicksort" class="quicksort" data-sort-value="name">
				<i class="fa fa-sort-alpha-asc" aria-hidden="true"></i>
			</a>
		</div>
		
		<div class="col-xs-3 col-sm-4">
      <div class="search input-group">
        <input type="text" class="form-control quicksearch" id="quicksearch" placeholder="Search" />
      </div>
    </div>
		
  </div>
  
  <div class="row">
    <div class="col-sm-8 col-sm-offset-2">
      <div id="container"> </div>
    </div>
  </div>
</div>

页面的底部，需远程调用jQuery库和/isotope.pkgd.js文件，并引入必要的页面JS文件，代码如下：

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js'></script>
<script src="js/index.js"></script>