Avatar billede morten_21 Nybegynder
25. november 2005 - 15:17 Der er 5 kommentarer og
1 løsning

Drop down menu med søgning udfra tastetryk

Hej,

Jeg søger en regulær html dropdown menu, blot med den feature at man kan "søge" vha. tastetryk, som man f.eks. gør i Windows Explorer - hvor man ved at trykke f.eks. "T" og "E" kommer frem til alle mapper der begynder med TE.

I en normal dropdown menu, kan man kun trykke det første bogstav, og derefter springe frem ved at trykke samme bogstav igen.

Kan det gøres med noget Javascript? Eller hvordan skal det løses?

På forhånd tak! :-)
Avatar billede power_t Nybegynder
25. november 2005 - 15:20 #1
Avatar billede power_t Nybegynder
25. november 2005 - 15:21 #2
...kodeeksempel nederst på siden. Har testet i IE6 og det virker.
Avatar billede morten_21 Nybegynder
25. november 2005 - 15:31 #3
Kanon - det virker :-) Tak for det!
Avatar billede power_t Nybegynder
25. november 2005 - 15:32 #4
Smider du lidt poooint! (-;
Avatar billede power_t Nybegynder
25. november 2005 - 15:33 #5
Ja det gjorde du..Takker...
Avatar billede skovenborg Nybegynder
25. november 2005 - 15:55 #6
ævæv, jeg havde eller lige siddet og bakset med en hjemmelavet udgave. Desværre for mig var IE og Mozilla ret uenige om hvordan add-metoden på selectboxe skulle virke. Men jeg vil alligevel tillade mig at poste scriptet her, selvom jeg ikke vil påstå det skulle være bedre end power_t's link (har ikke lige testet det).

<script type="text/javascript">
  function makeOptionCollection(selbox) {
      selbox.optionCollection = [];
      for (var i = 0; i < selbox.options.length; i++) {
            selbox.optionCollection[i] = selbox.options[i];
            selbox.optionCollection.sort();
      }
  }

  function searchSelect(searchStr,selbox) {
      var coll = selbox.optionCollection;
      if (coll) {
            var re = new RegExp("^"+searchStr,"ig");
            selbox.length = 0;
            for (var i = 0; i < coll.length; i++) {
                if (coll[i].text.match(re)) {
                    selbox.options[selbox.length] = coll[i];
                }
            }
      }
  }

  window.onload = function() {
      var selbox = document.getElementById("byer");
      makeOptionCollection(selbox);

  }
</script>

<form>
<input type="text" onkeyup="searchSelect(this.value,this.form.byer);">
<select multiple="5" style="height:150px;" name="byer" id="byer">
  <option>Aarhus</option>
  <option>Skanderborg</option>
  <option>Randers</option>
  <option>Ringkøbing</option>
  <option>Assens</option>
  <option>Fjellerup</option>
  <option>Ribe</option>
  <option>Århus</option>
</select>
</form>

Virker i Mozilla og IE :-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester