Поиск по началу с не содержащей буквы - PullRequest
Новая
       13

Поиск по началу с не содержащей буквы

0 голосов
/ 07 февраля 2019

Я пытаюсь реализовать функцию поиска.Но это поиск, содержащий буквы, и я хочу, чтобы поиск начинался с начальной буквы.Может кто-нибудь мне помочь?

Вот мой существующий код: 

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 ]

0 голосов
/ 07 февраля 2019

Вам нужно добавить атрибут 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 в поле поиска, и вы получите тот же результат.

0 голосов
/ 07 февраля 2019

Вы можете использовать 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-шаблон.Мы просто выбираем все span , чтобы показать их по умолчанию, а затем скрываем все, что не соответствует текущему поисковому запросу.

Обратите внимание на дополнительные toUpperCase() для нечувствительности к регистру.Вы можете удалить их, если хотите, чтобы при вводе результатов поиска учитывался регистр.

Мы также используем метод .filter вместо селектора contains.

Чтобы избежать необходимости изменять существующий HTML-шаблон (например, добавлять дополнительные атрибуты, такие как name или id к вашему диапазону для обеспечения поиска), мы используем textContent и / илиinnerText для чтения внутреннего html-содержимого span .

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

...