input搜索筛选\过滤列表

最新推荐文章于 2024-07-16 11:07:16 发布

强哥blog

最新推荐文章于 2024-07-16 11:07:16 发布

阅读量2.9k

点赞数

分类专栏： JavaScript 插件文章标签：搜索过滤 input过滤筛选过滤列表

本文链接：https://blog.csdn.net/qq_36263601/article/details/72318031

版权

JavaScript 同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

插件

1 篇文章 0 订阅

订阅专栏

 
  <!DOCTYPE html 
  > 
 
 
  < 
  html 
   lang= 
  "en" 
  > 
 
 
  < 
  head 
  > 
 
 
  < 
  meta 
   charset= 
  "UTF-8" 
  > 
 
 
  < 
  meta 
   name= 
  "viewport" 
   content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
 
  < 
  meta 
   http-equiv= 
  "X-UA-Compatible" 
   content= 
  "ie=edge" 
  > 
 
 
  < 
  title 
  >input筛选\过滤列表 
  </ 
  title 
  > 
 
 
  < 
  script 
  src= 
  "jquery-1.11.1.min.js" 
  ></ 
  script 
  > 
 
 
  </ 
  head 
  > 
 
 
  < 
  body 
  > 
 
 
  < 
  input 
  type= 
  "text" 
  class= 
  "filterinput" 
  > 
 
 
  < 
  ul 
   class= 
  "role00" 
  ></ 
  ul 
  > 
 

 
  < 
  script 
  > 
 
 
  var 
  Controller={ 
 
 
  "filterList" 
  : 
  function( 
  input, 
  list) { 
 
 
  /*var form = $("<form>").attr({"class":"filterform","action":"#"}), 
 
 
  input = $("<input>").attr({"class":"filterinput","type":"text"}); 
 
 
  $(form).append(input).appendTo(header);*/ 
 
 
  $( 
  input). 
  change( 
  function () { 
 
 
  var 
  filter = 
  $( 
  this). 
  val(); 
 
 
  if( 
  filter) { 
 
 
  $matches = 
  $( 
  list). 
  find( 
  'a:Contains(' + 
  filter + 
  ')'). 
  parent(); 
 
 
  $( 
  'li', 
  list). 
  not( 
  $matches). 
  slideUp(); 
 
 
  $matches. 
  slideDown(); 
 

   } 
  else { 
 
 
  $( 
  list). 
  find( 
  "li"). 
  slideDown(); 
 

   } 
 
 
  return 
  false; 
 

   }). 
  keyup( 
  function () { 
 
 
  $( 
  this). 
  change(); 
 

   }); 
 

   }, 
 

   }; 
 

 
  /*用法*/ 
 
 
  //搜索过滤器功能 
 
 
  jQuery. 
  expr[ 
  ':']. 
  Contains = 
  function( 
  a, 
  i, 
  m){ 
 
 
  return ( 
  a. 
  textContent || 
  a. 
  innerText || 
  ""). 
  toUpperCase(). 
  indexOf( 
  m[ 
  3]. 
  toUpperCase())>= 
  0; 
 

   }; 
 
 
  Controller. 
  filterTable( 
  ".filterinput", 
  ".role00"); 
 
 
  </ 
  script 
  > 
 
 
  </ 
  body 
  > 
 
 
  </ 
  html 
  > 
 