代码之家 › 专栏 › 技术社区 › Muhammad Owais

以不包含字母的开头搜索

search function jquery javascript

Muhammad Owais · 技术社区 · 7 年前

我正在尝试实现搜索功能。但它是通过包含字母来搜索的,我想让它通过开始字母来搜索。有人能帮我吗?

这是我现有的代码:

jQuery.expr[':'].contains = function(a, index, obj) {
        return jQuery(a).text().toUpperCase()
            .indexOf(obj[3].toUpperCase()) >= 0;
    };

    function funnelInputSearch(thisSearchType) {
        var clientSearch = document.getElementById(thisSearchType),
            thisSearchTypeSelector = $('#' + thisSearchType),
            s = clientSearch.value;
        thisSearchTypeSelector.closest('.tab-pane').find('[class*="itemsList-"] .field-label-wrap').show();
        thisSearchTypeSelector.closest('.tab-pane').find('[class*="itemsList-"] .field-label-wrap:not(:contains("' + s + '"))').hide();
    }
    $('.funnel-input-search input').on('keyup', function () {
        var thisSearchType = $(this).attr('id');
        funnelInputSearch(thisSearchType);
    })

这是小提琴 http://jsfiddle.net/5u373deu/6

2 回复 | 直到 7 年前

Alexandre Elshobokshy 7 年前

您需要添加 name 属性,然后可以执行以下操作:

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

function searchClients() {
  var clientSearch = document.getElementById("clientSearch");
  var s = clientSearch.value;
  $('.select-options span').hide();
  $('.select-options span[name^="' + s + '" i]').show();
  if(s == '') $('.select-options span').show()
}

$("#clientSearch").keyup(function() {
  searchClients();
});

span {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div class="select-options ps-container below ps-active-y">

  <input id="clientSearch" type="text">

  <span name="bitcoin">Bitcoin</span>
  <span name="cat">Cat</span>
  <span name="whiskey">Whiskey</span>
  <span name="table">Table</span>

</div>

默认情况下,您基本上隐藏了所有内容,只显示与搜索条件名称相对应的内容,方法是:

.select-options span[name^="' + s + '" i]

这是在类中选择以某个名称开头的跨度元素。注意到 i 最后,要说明这是不区分大小写的。所以你要么写 cat 或 CaT 在搜索框中,您将得到相同的结果。

Alex Pappas 7 年前

你可以使用 RegExp 的 test(str) 方法。在正则表达式中,插入符号 ^ 在字符串的开头匹配。

 function searchClients() {
   var clientSearch = document.getElementById("clientSearch");
   var s = clientSearch.value;
   $("span").show();
   $("span").filter(function () {
    return !(new RegExp('^'+(s).toUpperCase()))
       .test((this.textContent || this.innerText || '').toUpperCase());
   }).hide();
 }

替换您的方法 searchClients 具有上述功能。这样就不需要在现有的HTML模板上添加任何内容。我们只是选择跨度默认情况下显示它们,然后隐藏所有与当前搜索输入不匹配的内容。

注意附加的 toUpperCase() 因为不敏感。如果希望搜索输入区分大小写,可以删除它们。

我们也在使用 .filter 方法而不是 contains 选择器。

为了避免修改现有的HTML模板(例如,必须添加其他属性,如 name 或 id 在您的范围内提供搜索查找),我们正在使用 textContent 和/或 innerText 要读取跨度 s。

http://jsfiddle.net/apappas1129/xahbL8u6/2/