Расширенная опция поиска с javascript

-2

Я изо всех сил пытаюсь реализовать функцию поиска на своем веб-сайте и не знаю, как начать с этого в javascript.Расширенная опция поиска с javascript

То, что я пытаюсь сделать:

При вводе текста в чем-то, например, «foo», скрипт должен искать во всех HTML-разметках-тегах (все теги имеют класс «searchopt»).

Теперь скрипт должен изменить классы меток разметки, которые не содержат искомое слово (в данном случае «foo») для класса «donotshow».

Все метки меток, которые do имеют слово «foo» внутри, не должны получать новый класс.

Если ничего не было найдено с этим словом внутри, классы не должны меняться, но в верхней части тела должен быть текст, в котором говорится, что ничего не найдено.
Может кто-нибудь помочь мне начать с этого?

источник

2014-11-12 Intera

Что вы пробовали? Где ваш код? Где вам нужна помощь? Мы можем вам помочь, но мы не здесь, чтобы делать вашу работу! –

Пожалуйста, возьмите это в духе, в котором он предназначен, но если ваш английский беден - вы поможете себе разместить столько кода, сколько сможете ... – elzi

Проблема в том, что я не очень хорошо разбираюсь в javascript и делаю даже не знаю, будет ли это работать. Друг сказал мне, что я могу разобраться с этим. Мне бы хотелось, чтобы кто-то мог создать для меня первый скрипт (изменить). ... Я сожалею о плохом английском, я все еще в школе и просто нахожусь на втором году обучения. Я так сожалею об этом! – Intera

Просто, чтобы вы начали

<!DOCTYPE html> 
 
<html><head><title>Homework</title> 
 

 
<style> 
 
.searchopt {display:block;} 
 
.donotshow {display:none;} 
 
</style> 
 

 
</head><body> 
 

 
Search: <input type="text" onkeyup=" 
 
    for(var elms= document.getElementById('content') 
 
         .getElementsByTagName('p') 
 
     ,  L= elms.length 
 
     , found= 0 
 
    ; L-- 
 
    ; elms[L].className= ~elms[L].textContent.indexOf(this.value) 
 
         ? found='searchopt' 
 
         : 'donotshow' 
 
    ); 
 
    this.nextSibling.innerHTML= found ? '' : ' not found' ; 
 
"><span></span><div id="content"> 
 
<p class="searchopt">The lazy gray fox crawled under the old tree.</p> 
 
<p class="searchopt">It was a pretty old fox.</p> 
 
<p class="searchopt">This is why he was gray.</p> 
 
</div> 
 

 
</body></html>

Выше мы использовали indexOf как способ не генерировать новое регулярное выражение и использовать его. indexOf вернет -1 (известный как контрольное значение), когда результат не найден. Значения Sentinel выхватываются с ~. Торговля для этой оптимизации скорости заключается в том, что она чувствительна к регистру.

Edit:

Если мы хотим, чтобы сделать эту работу в регистронезависимом образом, мы мы больше не можем увернуться с помощью регулярных выражений. Таким образом, мы создаем один и установить его не чувствительны к регистру:

<!DOCTYPE html> 
 
<html><head><title>Homework</title> 
 

 
<style> 
 
.searchopt {display:block;} 
 
.donotshow {display:none;} 
 
</style> 
 

 
</head><body> 
 

 
Search: <input type="text" onkeyup=" 
 
    for(var elms= document.getElementById('content') 
 
         .getElementsByTagName('p') 
 
     ,  L= elms.length 
 
     , found= 0 
 
     , rxp= new RegExp(this.value, 'i') 
 
    ; L-- 
 
    ; elms[L].className= rxp.test(elms[L].textContent) 
 
         ? found='searchopt' 
 
         : 'donotshow' 
 
    ); 
 
    this.nextSibling.innerHTML= found ? '' : ' not found' ; 
 
"><span></span><div id="content"> 
 
<p class="searchopt">The lazy gray fox crawled under the old tree.</p> 
 
<p class="searchopt">It was a pretty old fox.</p> 
 
<p class="searchopt">This is why he was gray.</p> 
 
</div> 
 

 
</body></html>

источник

2014-11-12 18:44:38 GitaarLAB

Как я могу теперь сказать, что маленькие или большие буквы оба хорошо записываются в коробку? – Intera

Расширенная опция поиска с javascript

ответ

Смежные вопросы