阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.searcher 中文API文档

      插件 jQuery.searcher 中文API文档 https://github.com/lloiser/jquery-searcher

      jQuery Searcher Plugin

      The jQuery Searcher Plugin connects any list-like data with an input for searching.

      Installation

      Download the latest release of this plugin on GitHub.

      Include the jquery.searcher.js script after the jQuery library (unless you are packaging scripts somehow else):

      <script src="/path/to/jquery.searcher.js"></script>
      

      Usage

      $("...").searcher({
          itemSelector:  "...", // jQuery selector for the data item element
          textSelector:  "...", // jQuery selector for the element which contains the text
          inputSelector: "..."  // jQuery selector for the input element
      });
      

      Example

      See the live version of the following example on the GitHub page.

      Given the following HTML markup:

      <input id="tablesearchinput" />
      <table id="tabledata">
          <tbody>
              <tr>
                  <td>#1</td>
                  <td>Like a Rolling Stone</td>
                  <td>Bob Dylan</td>
                  <td>1965</td>
              </tr>
              <tr>
                  <td>#2</td>
                  <td>(I Can't Get No) Satisfaction</td>
                  <td>The Rolling Stones</td>
                  <td>1965</td>
              </tr>
              ...
          </tbody>
      </table>
      

      And executing the following script connects the input with the table:

      $("#tabledata").searcher({
          inputSelector: "#tablesearchinput"
          // itemSelector (tbody > tr) and textSelector (td) already have proper default values
      });
      

      Documentation

      The following table contains all possible options which can be passed to the plugin.

      NameTypeDescription
      itemSelectorstringjQuery selector for the data item element (e.g. tr, li).
      Default: "tbody > tr"
      textSelectorstringjQuery selector for the element which contains the text within the item element.
      If not specified the data item element is used instead.
      Default: "td"
      inputSelectorstringjQuery selector for the input element which is used to filter the data.
      Default: ""
      caseSensitiveboolDetermines whether the search should be case sensitive or not.
      Default: false
      togglefunctionthis function is called for each data item element when the text in the input changes.
      it is called with the data item element and a boolean value indicating whether the item contains the text or not.
      Default: function(item, containsText) { $(item).toggle(containsText); }

      License

      Copyright (c) 2014 Lukas Beranek Licensed under the MIT license.

      目录
      目录