使用jquery过滤器的搜索输入只对单词的一部分起作用

jecbmhm3 于 2023-11-17 发布在 jQuery

关注(0)|答案(1)|浏览(132)

我有两个选择输入和一个搜索字段来过滤一些div。select输入可以像预期的那样工作。搜索字段应该显示包含搜索框中文本的div，但它只在例如“ane”而不是“Jane”时才有效。
有人能看出问题所在吗？

$(document).ready(function() {
  // Hide all divs initially.
  $('.col.kontaktpersoner').hide();

  // Show the corresponding divs when the user types in the search field and selects a department and/or location.
  $('#search-field, #departments, #locations').on('input change', function() {
    var searchTerm = $('#search-field').val().toLowerCase().trim();
    var department = $('#departments').val();
    var location = $('#locations').val();

    // Construct the selector for the corresponding divs.
    var selector = '.col.kontaktpersoner';
    if (department) {
      selector += '.' + department;
    }
    if (location) {
      selector += '.' + location;
    }

    // Find all divs that contain the search term.
    var filteredDivs = $(selector).filter(':contains("' + searchTerm + '")');

    // If there are no divs that contain the search term, then find all divs that contain the search term as a whole word.
    if (filteredDivs.length === 0) {
      filteredDivs = $(selector).filter(':contains(\\b' + searchTerm + '\\b)');
    }

    // If there are still no divs that contain the search term, then find all divs that contain the search term as a prefix.
    if (filteredDivs.length === 0) {
      filteredDivs = $(selector).filter(':contains("' + searchTerm + '%")');
    }

    // Show the filtered divs.
    filteredDivs.show();

    // Hide all other divs.
    $('.col.kontaktpersoner').not(filteredDivs).hide();
  });
});

个字符

jquery

来源：https://stackoverflow.com/questions/77322431/search-input-with-jquery-filter-works-only-with-part-of-the-word

1条答案

按热度按时间

byqmnocz1#

你的问题是你没有比较同一个案例。
这一行：

var searchTerm = $('#search-field').val().toLowerCase().trim();

字符串
意味着你的搜索词Jane变成了jane--而且你没有任何包含jane的行，只有Jane。
最简单的解决方案是实现一个不区分大小写的:contains函数，例如从这个答案
正在提供更新的片段：

jQuery.expr[':'].icontains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};

$(document).ready(function() {
  // Hide all divs initially.
  $('.col.kontaktpersoner').hide();

  // Show the corresponding divs when the user types in the search field and selects a department and/or location.
  $('#search-field, #departments, #locations').on('input change', function() {
    var searchTerm = $('#search-field').val().trim();
    var department = $('#departments').val();
    var location = $('#locations').val();

    // Construct the selector for the corresponding divs.
    var selector = '.col.kontaktpersoner';
    if (department) {
      selector += '.' + department;
    }
    if (location) {
      selector += '.' + location;
    }

    // Find all divs that contain the search term.
    var filteredDivs = $(selector).filter(':icontains("' + searchTerm + '")');
    //console.log($(selector).length, filteredDivs.length);

    // Hide all related divs
    $('.col.kontaktpersoner').hide();

    // Show the filtered divs.
    filteredDivs.show();

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="departments">
  <option value="">Select Department</option>
  <option value="sales">Sales</option>
  <option value="marketing">Marketing</option>
  <option value="engineering">Engineering</option>
</select>

<select id="locations">
  <option value="">Select Location</option>
  <option value="new york">New York</option>
  <option value="london">London</option>
  <option value="tokyo">Tokyo</option>
</select>

<input type="text" id="search-field" placeholder="Search kontaktpersoner...">

<div class="col kontaktpersoner sales london">
  <p>John Doe</p>
</div>

<div class="col kontaktpersoner marketing london">
  <p>Jane Doe</p>
</div>

<div class="col kontaktpersoner engineering london">
  <p>Peter Parker</p>
</div>

的数据
几个额外的注意事项：
如果你隐藏所有然后只显示你想要的，它将是原子的（显示为一个），所以你不需要.not(filtered)

$('.col.kontaktpersoner').hide();
filteredDivs.show();

型
如果searchTerm没有出现在文本中的任何地方（你的第一次检查），那么根据定义，它也不会作为一个完整的单词或前缀出现-所以你不需要这些检查。

赞(0）回复(0）举报 2023-11-17

我来回答

使用jquery过滤器的搜索输入只对单词的一部分起作用

1条答案

相关问题

热门标签

最新问答