Как сделать поиск по тексту на javascript?

Question

[SobolevVladimir]

Имеется сайт, который представляет из себя длинный список элементов, которые имеют такую конструкцию:
<p><a href="что-то">"Какой-то текст"</a></p>
Это просто очень большой список ссылок на документы и различные ресурсы. Есть одно НО - сайт не лежит на хостинге. Человек носит его на флешке и использует только офлайн, открывая .html файл браузером. Возникла необходимость сделать поиск. Что-то вроде такого - ищутся совпадения по вбитому тексту среди текста в тэгах (Как я указал выше) и если нашлись совпадения - то тэг остается, а у всех остальных срабатывает свойство display: none, или вроде того. Как можно реализовать что-то подобное? Или, если у вас есть идея получше, предложите её, пожалуйста.
Заранее огромное спасибо Вам.

Comments

[Александр]

CTRL+F?

Answer 1

[coderisimo]

Вот основной принцип :

https://codepen.io/coderisimo/pen/RyvPBr

фильтруется прямо в момент ввода текста.

Comments

[Максим]

он ищет только в теге p ?

[coderisimo]

Максим Ленский,
Смотрите код. Сейчас да

$('#container > p').each(function(i)

нужен конкретный тэг - добавьте поиск в нем

[Максим]

coderisimo, https://codepen.io/topicstarter/pen/gzqaWG?editors=1010 что то не работает по тексту , что бы хотя бы примерно как у меня

[coderisimo]

Максим Ленский,

Леонид, Вы где ищете? ) Если в своем диве, то конечно не будет работать. Очень важно понять принцип, как работает приведенный код, тогда не будет проблем с переносом куда-либо еще.

$('#container > p').each(function(i){
    var elem = $(this);
    if(elem.html().toLowerCase().indexOf(searchText)=== -1){
      elem.addClass('hidden');
    }else{
       elem.removeClass('hidden');
    }
   });

смотрите. Вот здесь мы берем все "p" которые лежат в контейнере (#container) и содержимое каждого из них проверяем на наличие подстроки из фильтра поиска. У вас же только ОДИН и DIV . Соответственно нужно написать что-то типа :

$('body').on('keyup' , '#filter-input' , function(){
  var searchText = $('#filter-input').val().toLowerCase();
    var elem = $ $('#container');
    if(elem.html().toLowerCase().indexOf(searchText)=== -1){
      elem.addClass('hidden');
    }else{
       elem.removeClass('hidden');
    }
});

[Максим]

coderisimo, так тоже не работает https://codepen.io/topicstarter/pen/gzqaWG?editors=1010

[coderisimo]

Максим Ленский,
Что *сенсоред* не работает? ))) (удивленный смайлик)
Напишите в фильтре 'Z' и див будет скрыт, потому что у там НЕТ ни одной буквы Z

[SobolevVladimir]

coderisimo, спасибо Вам огромное за Ваш метод. Я попытался натянуть его на мой случай. Так как у меня тэги а внутри р, я изменил условие '#container > p > a', а также прописал необходимые id у элементов, но почему-то не получилось, пока что. Скажите, пожалуйста, нужно ли подключить библиотеку jquery или что-то ещё?

[coderisimo]

SobolevVladimir
Пожалуйста. Если видите в JS '$' с высокой вероятностью это jquery селектор. Так что - да. jQuery требуется.

[Александр]

Василий, здравствуйте.
Не подскажете, как подправить этот скрипт, чтобы весь текст в div был изначально невидим, а при вводе букв появлялись только результаты поиска?

[coderisimo]

alek-sandr,
ну, вот так , например



там же все очевидно. Возможно для ваших задач проще использовать что-то типа select2

[Александр]

Василий, большое спасибо.

[coderisimo]

удачи)

Answer 2

[Максим]

https://codepen.io/topicstarter/pen/erxNrj?editors=1000

Answer 3

[Coder321]

const search = document.querySelector('#search');
const allLinks = document.querySelectorAll('#container>p>a');
search.onkeyup = function (event) {
    const regex = new RegExp(event.target.value.toLowerCase());
    allLinks.forEach(element => {
        if (regex.test(element.textContent.toLowerCase())) {
            element.style.display = '';
        } else {
            element.style.display = 'none';
        }
    })
}