Question

我正在尝试实现搜索功能。但是它是通过包含字母进行搜索的，我想通过开头字母进行搜索。谁能帮我？

这是我现有的代码：

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

Answer 1

您需要为跨度添加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]

这是在类中选择以特定名称开头的span元素。注意最后的i，是要区分大小写的。因此，您可以在搜索框中输入cat或CaT，最终得到相同的结果。

Answer 2

您可以使用RegExp的{{1}}方法。在正则表达式中，插入符号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(); }。这样，您无需在现有的html模板上添加任何内容。我们只需选择所有 span 以默认显示它们，然后隐藏所有与当前搜索输入不匹配的内容。

请注意附加的searchClients区分大小写。如果您希望搜索输入区分大小写，则可以删除它们。

我们还使用toUpperCase()方法而不是.filter选择器。

为避免必须修改现有的html模板（例如，必须在跨度中添加contains或name之类的其他属性以提供搜索查询），我们使用id和/或textContent来读取 span 的内部html内容。

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

以不包含字母的开头搜索

2 个答案: