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

标签 javascript jquery function search

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

这是我现有的代码:

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

最佳答案

您需要为您的跨度添加一个 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,它用于指定不区分大小写。因此,您可以在搜索框中输入 catCaT,最终会得到相同的结果。

关于javascript - 按不包含字母开头搜索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54570864/

相关文章:

javascript - 有没有一种方法可以设置c3.js中的x和y轴样式?

javascript - 获取页面滚动上元素的坐标

c++ - 模棱两可的声明

Jquery 向下滚动 css 不工作

python - 以前的产量操作 - python

php - 处理 PHP 位标志

php - 用于发送到 PHP 的最高效的 JavaScript

javascript - JS HTML 5 - 无法集成示例代码 - 帮助

javascript - 如何检查javascript var中是否存在文本

javascript - 如何使用 wrapInner() 将特定内容包装在 ah html 标签内?