jquery根据名称实时搜索匹配功能

最新推荐文章于 2024-03-09 19:09:48 发布

hjx_dou

最新推荐文章于 2024-03-09 19:09:48 发布

阅读量2.9k

点赞数

分类专栏： php总结文章标签： jquery

php总结专栏收录该内容

15 篇文章 0 订阅

订阅专栏

jquery根据名称实时搜索匹配功能，可以根据输入信息快速定位到某个标签

<script> 
(function ($) {
  jQuery.expr[':'].Contains = function(a,i,m){
      return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  };
  function filterList(header, list) { 
  $("#search_input").change( function () {
    var filter = $(this).val();
    if(filter) {
      $matches = $(list).find('a:Contains(' + filter + ')').parent();
      $('dd', list).not($matches).slideUp();
      $matches.slideDown();
        } else {
          $(list).find("dd").slideDown();
        }
        return false;
    })
    .keyup( function () {
        $(this).change();
    });
  }
  $(function () {
    filterList($("#form"), $("#list"));
  });
}(jQuery));
</script>
<div><div id="form"><input style="border-radius:0; font-size:14px; height:40px;line-height:40px;width: 95%;margin: 10px 1%;border: 1px solid #66afe9;padding-left: 3%;" placeholder="输入名称可快速查找" type="text" id="search_input"></div></div>