Potrebno dodat na gotovi kod za search

Programiranje
1

Pozdrav, ovdje se nalazi kod koji sluzi za search, radi kako treba samo je problem sto treba radit search 7000 linija, pa je problem da mu treba nekada i par sekundi da nade trazeno. Da li netko moze nadopunit kako bi mogao napraviti da sa strane imam jednu sliku po defaultu i da ju mijenja. Na pocetu bi bila slika zelena kvacica i kada bi se upisivalo bi se ona mijenjala, znaci kada zavrsi search bi bilo zelena kvacica ako je dole izlistan neki od podataka, a crvena kvacica bi bila ako bi dole bilo prazno, dok bi se trazilo bi bila slika od pretrazivanja ili neki gif od searcha. Sliku sam vec napravio pa bi trebalo stavit samo da mijenja background position slike posto je na jednoj slici sve tri slike pa bi bilo background-position: 0 -30px recimo i za drugi -60. Pa ako netko zna kako se to moze napraviti.

Hvala

<script type="text/javascript" language="javascript">
  var myVals=new Array();
   function CacheValues()
   {
   var l =  document.getElementById('ListBox1');
 
   for (var i=0; i < l.options.length; i++)
    {
      myVals[i] = l.options[i].text;
    }
   }
 
  function SearchList()
  {
    var l =  document.getElementById('ListBox1');
    var tb = document.getElementById('TextBox1');
 
    l.options.length=0;
 
    if(tb.value == "")
    {
      for (var i=0; i < myVals.length; i++)
      {
        l.options[l.options.length] = new Option(myVals[i]);
      }
    }
    else{
 
      for (var i=0; i <myVals.length; i++)
      {
        if (myVals[i].toLowerCase().indexOf(tb.value.toLowerCase()) != -1)
        {
          l.options[l.options.length] = new Option(myVals[i]);
        }
        else
        {
          // do nothing
        }
      }
    }
  }
  function ClearSelection(lb)
  {
    lb.selectedIndex = -1;
  }
 
</script>
<body onload=CacheValues();>
  <form id="form1" runat="server">
  <input type="text" ID="TextBox1" onkeyup="return SearchList();"/>

  <select ID="ListBox1" Height="150px" Width="250px"  size="13" multiple="multiple">
  <option>Vincent</option>
  <option>Jennifer</option>
  <option>Shynne</option>
  <option>Christian121</option>
  <option>Helen 121</option>
  <option>Vladi</option>
  <option>Bee 132</option>
  <option>Jerome</option>
  <option>Vinz</option>
  <option>Churchill</option>
  <option>Rod</option>
  <option>Mark</option>
  </select>
  </form>
</body>
</html>
2

Imaš nekoliko grešaka u svom kodu, odnosno krivo postavljenih stvari.

Prvo … atributi height i width koje si stavio na selectbox prihvaćaju samo integer. Znači ne width=“250px” već width=“250”.

Drugo, ako pretražuješ 7000 linija i misliš da je presporo nemoj staviti na onkeyup da se izvodi search već na onkeypress i u toj funkciji detektiraj da li je pritisnut ENTER. Drugim riječima - user kucka i tek dok stisne enter izvodi se search. Ili recimo dok search input izgubi fokus.

Treće, ako je tako puno rezultata ne bih prikazivao u startu svih 7000 linija, već tek dok user unese bar 2 slova u search. Na taj način smanjuješ vrijeme potrebno za ispis rezultata i ne prikazuješ svih 7000 redova. Ali ako to nije moguće opet postoji način da to ubrzaš.

I zadnje i najbitnije - glavni razlog zašto ti pretraga traje po par sekundi nije zato što imaš 7000 redova već način na koji iscrtavaš rezultate u selectbox, odnosno renderiranje optiona u selectu ti oduzima vremena. Browseri su malo spori dok radiš sa DOM elementima na način da ih kreiraš i iscrtavaš jedan po jedan. Odnosno, ti to radiš u ovoj liniji:

l.options[l.options.length] = new Option(myVals[i]);

Na ovaj način ti dodaješ jedan po jedan objekt u selectbox i browseru treba vremena da to ispiše na ekran.

Nemoj koristiti new Option(), nego izbildaš string i onda ga ubaciš u html. Ovako:

var html = []; // ovo je isto kao i new Array();
for (var i=0; i < myVals.length; i++)
{
html.push("" + myVals[i] + “”); // dodam html string za opciju u array
}

document.getElementById(‘ListBox1’).innerHTML = html.join(""); // sve elemente arraya (option stringove) joinam i ubacim direktno u html.

Mislim da će ti ovo dovoljno ubrzati pretragu da ti ne treba nikakva ikonica sa strane kao indikator.

3

Hvala na pomoći. Ja sam sad to dodao ovako, mislim kako si rekao i problem je taj što je na početku izlistano 0 njih, a trebali bi bit izlistani ako se klikne sa mobitelom pa se ručno traži. Ovaj kod sam našao na netu, ali mi treba bit tako na promjenu textboxa da se pozove funkcija jer ljudi ne znaju točno što bi upisali pa bi on davao predložak. Ja bi to htio onda samo ubrzat da ne traje toliko.