Фильтрация по странице

@Archie_ · Регистрация: 28.04.2018

Студворк — интернет-сервис помощи студентам

Привет!)
Помогите пожалуйста чуть-чуть доработать скрипт.
Сейчас скрипт ищет строго то - что написано в инпуте, а надо что бы по словам, т.е. надо что бы скрипт брал первое слово из инпута и искал совпадение (как сейчас и происходит), затем брал второе слово из инпута и искал совпадения и т.д.
Например: Есть у нас слово "getFunctionInfoValue" и если я сейчас в инпут введу "get Info" то ничего не произойдет, т.к. у нас нету такой фразы, а нужно что бы отфильтровалось "getFunctionInfoValue"

https://codepen.io/anon/pen/EJeyPd

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<input type="text" onkeyup="myFunction()" id="myInput" placeholder="Search">
 
 
<p>elit. Placeat mollitia, nam voluptatibus maxime sed, illum veniam harum quos getFunctionInfoValue? Rerum consectetur etFunctionInfoValue quia quaerat quos id. liquam repudiandae ducimus asperiores iusto illum!</p>
  
    <ul id="myUL">
        <li><a href="#"> getFunctionInfoValue, </a></li>
        <li><a href="#"> consectetur adipisicing elit.</a></li>
        <li><a href="#"> Placeat mollitia, nam voluptatibus</a></li>
        <li><a href="#"> setFunctionInfoValue</a></li>
        <li><a href="#"> axime sed, illum veniam harum quos? Rerum consectetur</a></li>
    </ul>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById('myInput');
    filter = input.value.toUpperCase();
    ul = document.getElementById('myUL');
    li = ul.getElementsByTagName('li');
 
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName('a')[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else
            li[i].style.display = "none";
    }
}

И еще просьба помочь доработать вот этот скрипт.
Подсвечивание текста при вводе

@Emilien · 23.04.2019, 17:08

JavaScript
1
2
3
4
5
6
function myFunction() {
    const words = document.getElementById('myInput').value.toUpperCase().trim().split(/\s+/g);
    document.querySelectorAll('#myUL > li').forEach(li => {
        li.style.display = words.some(x => li.textContent.toUpperCase().indexOf(x) > -1) ? '' : 'none';
    });
}

@Archie_ · 23.04.2019, 19:26 **[ТС]**

Emilien, Спасибо большое!
Работает, но не так как хотелось бы. Сейчас поиск происходит отдельно для каждого слова по странице, а хотелось бы, что бы для каждого слова по <li>.
Например: Есть у нас в одном <li> "getFunctionInfoValue" и в другом <li> "setFunctionInfoValue" и если я ввожу "get Info", то отфильтруются оба варианта, а хотелось бы, что бы отфильтровалось только "getFunctionInfoValue".
Как я вижу работу скрипта:
Сначала вводим "get" и фильтруется только "get", далее вводим "Info" и "Info" производит поиск уже не по всей странице, а по тем <li>, которые уже отфильтрованы и т.д....
Если возможно такое сделать, то было бы вообще здорово.
Конечно соглашусь, что сделанный вами вариант будет удобнее в 95% случаев, но для моей задачи такой вариант(который я сейчас описал)будет удобнее.
--------------------------
И еще такой вопрос, Возможно ли сделать, что бы этот скрипт был без функции, что бы работал (как тот с подсветкой, из соседней темы), т.е. что бы не надо было в инпут прописывать onkeyup="myFunction()".

Спасибо!

@Emilien · 23.04.2019, 21:41

Как-то так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function myFunction(key, ul) {
    const words = key.toUpperCase().trim().split(/\s+/g);
    ul.forEach(li => {
        const text = li.textContent.toUpperCase();
 
        if (words.every(x => text.indexOf(x) > -1)) {
            li.style.display = '';
        } else {
            li.style.display = 'none';
        }
    });
}
 
let input = document.querySelector('#myInput');
let elements  = document.querySelectorAll('#myUL li');
input.addEventListener('keyup', () => myFunction(input.value, elements));

@Archie_ · 24.04.2019, 20:54 **[ТС]**

Emilien, Что то после переделывания, что бы не добавлять onkeyup="myFunction()" в инпут все поломалось.(
При подключении скрипта, все остальные скрипты в проекте перестают работать.
Если в первых двух вариантах скрипта помогли строки

JavaScript
1
jQuery.noConflict();(function($){ код })(jQuery);

и все заработало

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById('myInput');
    filter = input.value.toUpperCase();
    ul = document.getElementById('myUL');
    li = ul.getElementsByTagName('li');
  
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName('a')[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else
            li[i].style.display = "none";
    }
}
 
jQuery.noConflict();
(function($){ 
    let input = document.querySelector('#myInput');
    let elements = document.querySelectorAll('#myUL li');
    input.addEventListener('keyup', () => myFunction(input.value, elements));
})(jQuery);

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
function myFunction() {
    const words = document.getElementById('myInput').value.toUpperCase().trim().split(/\s+/g);
    document.querySelectorAll('#myUL > li').forEach(li => {
        li.style.display = words.some(x => li.textContent.toUpperCase().indexOf(x) > -1) ? '' : 'none';
    });
}
 
jQuery.noConflict();
(function($){ 
    let input = document.querySelector('#myInput');
    let elements = document.querySelectorAll('#myUL li');
    input.addEventListener('keyup', () => myFunction(input.value, elements));
})(jQuery);

То в третьем варианте(в последнем), как раз в том который нужен это не сработало.
Без этих строк все скрипты в проекте перестают работать, но если добавляю эти строки, то все скрипты начинают работать, но сам скрипт перестает работать.
Как это исправить ?

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function myFunction(key, ul) {
    const words = key.toUpperCase().trim().split(/\s+/g);
    ul.forEach(li => {
        const text = li.textContent.toUpperCase();
 
        if (words.every(x => text.indexOf(x) > -1)) {
            li.style.display = '';
        } else {
            li.style.display = 'none';
        }
    });
}
 
jQuery.noConflict();
(function($){ 
    let input = document.querySelector('#myInput');
    let elements = document.querySelectorAll('#myUL li');
    input.addEventListener('keyup', () => myFunction(input.value, elements));
})(jQuery);

@Emilien · 24.04.2019, 21:45

Можно попробовать так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function myFunction() {
    const words = document.querySelector('#myInput').value.toUpperCase().trim().split(/\s+/g);
    document.querySelectorAll('#myUL li').forEach(li => {
        const text = li.textContent.toUpperCase();
 
        if (words.every(x => text.indexOf(x) > -1)) {
            li.style.display = '';
        } else {
            li.style.display = 'none';
        }
    });
}
 
jQuery("#myInput").keyup(myFunction);

@Archie_ · 25.04.2019, 17:53 **[ТС]**

Сообщение от Emilien

Можно попробовать так:

Теперь все заработало, Спасибо большое!
-------------

Вот теперь столкнулся со следующим, при подключении скриптов(это касается не только этого скрипта, а всех скриптов)
при перезагрузке страницы, страница всегда прыгает в самый вверх, хотя в адресе - в конце стоит хэштег с id (...#id).
С некоторыми скриптами это решается, если подключить их в начале в теге "<head>", но большая часть скриптов в начале не работает почему то, а работает только если подключить в конце, перед закрывающемся тегом body.
Может в курсе как это лечится или может возможно сделать какой нибудь скрипт, что бы он отслеживал: Если страница обновилась, то получить у адреса id и прокрутить к тому месту?

@Archie_ · 26.04.2019, 19:06 **[ТС]**

Сообщение от Archie_

при перезагрузке страницы, страница всегда прыгает в самый вверх, хотя в адресе - в конце стоит хэштег с id (...#id).

Не знаю - насколько правильно, но решил проблему таким способом,
подключив скрипты в начале в теге <head> с атрибутом "async" и все заработало замечательно.)
А вот google говорит, что с таким способом будут сильные тормоза в старых браузерах.(

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@Archie_ 0 / 0 / 0 Регистрация: 28.04.2018 Сообщений: 50
	23.04.2019, 19:26 [ТС]
	Emilien, Спасибо большое! Работает, но не так как хотелось бы. Сейчас поиск происходит отдельно для каждого слова по странице, а хотелось бы, что бы для каждого слова по <li>. Например: Есть у нас в одном <li> "getFunctionInfoValue" и в другом <li> "setFunctionInfoValue" и если я ввожу "get Info", то отфильтруются оба варианта, а хотелось бы, что бы отфильтровалось только "getFunctionInfoValue". Как я вижу работу скрипта: Сначала вводим "get" и фильтруется только "get", далее вводим "Info" и "Info" производит поиск уже не по всей странице, а по тем <li>, которые уже отфильтрованы и т.д.... Если возможно такое сделать, то было бы вообще здорово. Конечно соглашусь, что сделанный вами вариант будет удобнее в 95% случаев, но для моей задачи такой вариант(который я сейчас описал)будет удобнее. -------------------------- И еще такой вопрос, Возможно ли сделать, что бы этот скрипт был без функции, что бы работал (как тот с подсветкой, из соседней темы), т.е. что бы не надо было в инпут прописывать onkeyup="myFunction()". Спасибо! 0

Фильтрация по странице

Решение