javascript - 按不包含字母的开头搜索

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);
    })

这是 fiddle http://jsfiddle.net/5u373deu/6

Answer 1

您需要为您的 span 添加一个 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，最终会得到相同的结果。