CODEWITHSUNDEEP
javascripthtml
Intera
Intera

Reputation: 33

Ignore capital and small initial letters

I would like to set that the use of capital and small initial letters should be ignored in this search script. So if I write "hello" or "HEllo" ... it should bring the same results.

Here is the script:

<input type="text" class="boxformal boxformal-cf" placeholder="Diese Seite durchsuchen ..." onkeyup="
for( var elms=document.getElementById('content')
                      .getElementsByTagName('article')
     ,      L=elms.length
   ; L--
   ; elms[L].className= ~elms[L].textContent.indexOf(this.value)
                      ? found='searchopt kurse-standart standart-grau groesse-15'
                      : 'donotshow'
   );
   this.nextSibling.innerHTML= found ? '' : 'Es wurde nichts gefunden!' ;
">

Thank you for helping!

P.s.: Some phrases are in German :)

Upvotes: 0

Views: 221

Answers (2)

GitaarLAB
GitaarLAB

Reputation: 14645

Ahh, the follow-up question from here.

If we want to make this work in a case-insensitive way, we we can no longer dodge using a regex. So we create one and set it to case-insensitive:

<!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>

This is better then transforming the casing of numerous unknown lengths of strings (the content) over and over again on each keypress (something that would pretty much kill the users browser after a few searches because they are all new strings)!

Upvotes: 0

CaldasGSM
CaldasGSM

Reputation: 3062

what about changing the casing of the strings?

<input type="text" class="boxformal boxformal-cf" placeholder="Diese Seite durchsuchen ..." onkeyup="
for( var elms=document.getElementById('content')
                      .getElementsByTagName('article')
     ,      L=elms.length
   ; L--
   ; elms[L].className= ~elms[L].textContent.toLowerCase().indexOf(this.value.toLowerCase())
                      ? found='searchopt kurse-standart standart-grau groesse-15'
                      : 'donotshow'
   );
   this.nextSibling.innerHTML= found ? '' : 'Es wurde nichts gefunden!' ;
">

Upvotes: 5

Related Questions