【问题标题】:Bootstrap 4 search filterBootstrap 4 搜索过滤器
【发布时间】:2018-06-05 19:42:38
【问题描述】:

我想制作搜索过滤器,但我只找到了只显示搜索项而不是框的过滤器。任何想法我该怎么做?这是我的代码:
HTML:

foreach($results as $row) { 
    echo '<div class="col-md-3">';
      echo '<div class="card" >';
        echo '<div class="card-body">';
          echo '<h5 class="card-title">'.$row->cm_name.' '.$row->cm_surname.'</h5>';
          echo '<h6 class="card-subtitle mb-2 text-muted">Dodano: '.mdate($dateString, $row->cm_added_date).'</h6>';
          echo '<p class="card-text">Nr. Tel: +48 '.chunk_split($row->cm_phone, 3, ' ').'</p>';
          echo '<a href="#" class="card-link">Edytuj</a>';
          echo '<a href="'.base_url('core/customers/delete/'.$row->cm_id).'" class="card-link">Usuń</a>';
        echo '</div>';
      echo '</div>';
    echo '</div>'; }

这是脚本:

$(document).ready(function(){
  $("#searchInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#searchBox *").filter(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
   });
  });
});

以及附加屏幕: Screen 1 Screen 2

【问题讨论】:

  • 提供足够的输入来解释问题
  • 你在想什么?
  • 这是什么#searchBox
  • 在这部分尝试$(document).on("keyup", "#searchInput", function() { 我在任何地方都看不到#searchInput id

标签: javascript php twitter-bootstrap codeigniter


【解决方案1】:

看起来.filter 需要返回真或假值。然后你需要对它提供给你的节点数组做一些事情。

$("#searchBox *").filter(function() {
    return $(this).text().toremoveLowerCase().indexOf(value) > -1);
}).hideOrDoWhateverYouLike();

http://api.jquery.com/filter/

【讨论】:

  • 添加一个console.log($("#searchbox *"));到你的代码,看看控制台中出现了什么
  • 好的 - 这应该可以。过滤器只是过滤节点。之后你需要对他们做点什么。查看编辑后的代码:
  • 我不知道。
  • 你能用更多的话澄清一下吗?
猜你喜欢
  • 2013-01-20
  • 1970-01-01
  • 2013-08-10
  • 1970-01-01
  • 1970-01-01
  • 2011-08-14
  • 2019-03-04
  • 2018-09-24
  • 2018-12-18
相关资源
最近更新 更多