Avatar billede jensb Nybegynder
25. august 2004 - 21:05 Der er 26 kommentarer og
2 løsninger

Standard HTML dropdown - spring til H - A = Hansen

Jeg har en normalt standard HTML dropdown menu <select>

Jeg har rigtig mange (alfabetisk listede) valgmuligheder, og som standard kan man jo så trykke på et bogstav på tastaturet, og så springer man ned til det forbogstav i listen.

Men jeg kunne godt tænke mig at man kunne trykke på flere bogstaver, således at man sprang til første, andet, tredje osv. bogstav i ordet.

Altså hvis jeg nu trykker først på H og så på E, så vil den først gå til Hans, og så til Ebbe. Men jeg vil gerne at den ender på HElle.

Vil dette være muligt at lave med et Javascript? Er der nogen der har sådan et liggende?

Jeg kan ikke selv finde ud af Javascript endnu, så point gives for en færdig løsning.

Obs, løsningen skal fungere sammen med en standard <select> dropdown menu.
Avatar billede jensb Nybegynder
25. august 2004 - 21:11 #1
Det ville også være genialt hvis man kan skrive et navn som ikke eksisterer i forvejen, og så tilføje det direkte. Altså hvis det fungerer som en slags kombineret tekstboks/dropdown.

Faktisk ligesom adresselinien i Internet Explorer, hvor man har mulighed for at vælge adresser, hvis der findes nogen med de bogstaver man har skrevet. Men hvor man også har mulighed for at skrive en helt ny adresse.
Avatar billede Slettet bruger
25. august 2004 - 21:22 #2
Jeg er sikker på at http://www.phoenixv.dk/exp/sorter_liste.html kan udbygges til dit behov :)
Avatar billede jensb Nybegynder
25. august 2004 - 21:29 #3
Det ser ud til at være helt perfekt.

Tak

Smid et svar og du får point
Avatar billede Slettet bruger
25. august 2004 - 21:38 #4
Du kunne jo vente med at acceptere til nogen kom med en løsning på din første kommentar, jeg forestiller mig noget med at du har en knap til højre for tekstfeltet, hvor man kunne klikke hvis der ikke blev fundet nogen i selectboxen.
Avatar billede jensb Nybegynder
25. august 2004 - 21:48 #5
Faktisk er den løsning du kom med tæt på perfekt.

Det eneste der ville gøre det endnu bedre, var hvis de navne der findes i listen, automatisk blev markeret, når der ikke var andre muligheder tilbage. Men hvis man så skrev yderligere et bogstav, så skulle det være den tekstboks hvor man skriver i der bliver aktiveret.

Altså hvis man i listen har navnene:
Abba, Aladin, Allan, Alma

Så vil man hvis man skriver "A" få listet alle fire navn, forsættet man med "AL" så får man listet : Aladin, Allan, Alma  . Når man har skrevet "ALL" så er der kun én mulighed, nemlig Allan. Så ville det være fedt, hvis Allan blev markeret, således at man bare kunne trykke Enter/Return...istedet for at man skal klikke på ham med musen først.

Hvis man derimod skriver flere bogstaver, f.eks. Allah...så kan det ikke længere være Allan, og fokus skal derfor være på det ord jeg elv har skrevet, således at det bliver tilføjet når jeg trykker enter.


Så hvis der er nogen der kan komme med sådan en løsning, så vil det være perfekt. Ellers så går pointene til el_barto.
Avatar billede Slettet bruger
25. august 2004 - 22:31 #6
Har leget lidt med det:

<html>
<head>
<script>
opts = new Array("Albatros", "Anders", "And", "Asger", "Bi", "Blomst", "Benjamin", "Bølle", "Citron", "Cykel", "Flæskestej"); //Ordene

function opdater(frm) {
sg = frm.ord.value.toLowerCase();
lt = new Array();

    for (i = 0; i < opts.length; i++) {
        if (opts[i].toLowerCase().indexOf(sg) == 0) {
        lt[lt.length] = opts[i];
        frm.liste.length = lt.length;
        }
    }

    if(lt.length == 0) {
    alert('intet fundet, marker indtastning');
    frm.send.focus();
    }

    if(lt.length == 1) {
    alert('kun en, marker den');
        for (i=0;i<opts.length;i++) {
        frm.liste.options[i].selected = true;
        frm.send.focus();
        return false;
        }
    }



    for (i = 0; i < lt.length; i++) {
    frm.liste.options[i].value = lt[i];
    frm.liste.options[i].text = lt[i];
    }
    frm.liste.selectedIndex = -1;
}
</script>
</head>
<body onLoad="document.frm.ord.value = ''; document.frm.liste.selectedIndex = -1; document.frm.ord.focus();">
<form name="frm">
<input type="text" name="ord" onkeypress="opdater(this.form);" onKeyUp="opdater(this.form);" style="width: 150px;">
<br>
<script>
document.write('<select size="' + opts.length + '" name="liste" style="width: 150px;">');
for (i = 0; i < opts.length; i++)
document.write('<option value="' + opts[i] + '">' + opts[i] + '</option>');
document.write('<select>');
</script>
<br><br>
<input type="submit" name="send" value="Send">
</form>
</body>
</html>

PS: de 2 x alert() kan du bare slette når du har forstået hvad der sker :)
Avatar billede jensb Nybegynder
25. august 2004 - 22:59 #7
Puha... sad lige og havde lidt vrøvl med den første.

Fandt til sidst ud af, at det var fordi at én af de skuespillere jeg hentede fra databasen, var Anders "Anden" Matthesen...  Det gav lidt knas med " omkring anden... Nå, men fik det endelig til at virke.

Så nu vil jeg prøve nummer to forslag du er kommet med :-)
Avatar billede Slettet bruger
25. august 2004 - 23:03 #8
Jeg vil anbefale dig til i databasen at ændre alle " til &&quot; som er HTML koden for samme tegn.

Du kan nok også påregne at løbe ind i problemer med ' men her kunne løsningen være at bruge ` eller ´
Avatar billede Slettet bruger
25. august 2004 - 23:03 #9
&&quot; skulle være &quot;

:)
Avatar billede jensb Nybegynder
25. august 2004 - 23:04 #10
Hmm.. det ser ud til at der er lidt fejl i nummer to.

Hvis jeg f.eks. taster C - Y, så kommer den rigtig nok frem og siger, at der kun er én, og om den skal markere...men den markerer "Citron" og ikke cykel.

Iøvrigt har man ikke mulighed for at skrive videre...hvis jeg f.eks. ville taste "cykelstyr"
Avatar billede jensb Nybegynder
25. august 2004 - 23:05 #11
Ja, det er nok en god idé. Havde bare slet ikke tænkt over muligheden, da skuespillerne jo normalt ikke har " i deres navne.
Avatar billede jensb Nybegynder
25. august 2004 - 23:08 #12
Nå, men du er ihvertfald sikret point for den første løsning, da det løser mit problem.

Men hvis du har lyst til at arbejde videre med nummer 2, så ville det da være cool. Og hvis du bruger meget tid på det, så bare sig til, så skal jeg nok smide nogle flere point oveni.
Avatar billede Slettet bruger
25. august 2004 - 23:21 #13
Har ændret lidt, se om det er bedre:

opts = new Array("Albatros", "Anders", "And", "Asger", "Bi", "Blomst", "Benjamin", "Bølle", "Citron", "Cykel", "Flæskestej"); //Ordene

function opdater(frm) {

sg = frm.ord.value.toLowerCase();
lt = new Array();

    for (i = 0; i < opts.length; i++) {
        if (opts[i].toLowerCase().indexOf(sg) == 0) {
        sidste = opts[i];
        nummer = lt[i];
        lt[lt.length] = opts[i];
        frm.liste.length = lt.length;
        }
    }
   

    if(lt.length == 0) {
    alert('intet fundet, marker indtastning');
    frm.send.focus();
    }

    if(lt.length == 1) {
    alert('kun en, marker den');
        for (i=0;i<opts.length;i++) {
        frm.liste.options[i].text = sidste;
        frm.liste.options[i].value = nummer;
        frm.liste.options[i].selected = true;
        frm.ord.focus();
        return false;
        }
    }

    for (i = 0; i < lt.length; i++) {
    frm.liste.options[i].value = lt[i];
    frm.liste.options[i].text = lt[i];
    }
    frm.liste.selectedIndex = -1;
}
Avatar billede jensb Nybegynder
25. august 2004 - 23:28 #14
Det hjalp lidt. Nu vælger den det rigtige punkt.

Men man kan stadig ikke skrive videre. Eller dvs. man kan skrive ét tegn mere, end det fundne ord. Så hvis jeg f.eks. skrive B-I, så finder den ordet bi, jeg kan så skrive ét bogstav mere, f.eks. L, men så får jeg ikke lov at taste mere.
Avatar billede jensb Nybegynder
25. august 2004 - 23:38 #15
Der er også lidt problemer med det formen sender.

Den sender kun de bogstaver jeg har skrevet, og ikke hele ordet, selvom det er blevet selected.
Avatar billede Slettet bruger
25. august 2004 - 23:54 #16
:)

Så har jeg rettet lidt i det, du kan sende formen med enter knappen

(Det er PHP, for at demonstrere det)

<html>
<head>
<script>
opts = new Array("Albatros", "Anders", "And", "Asger", "Bi", "Blomst", "Benjamin", "Bølle", "Citron", "Cykel", "Flæskestej"); //Ordene

function opdater(frm) {

sg = frm.ord.value.toLowerCase();
lt = new Array();

    for (i = 0; i < opts.length; i++) {
        if (opts[i].toLowerCase().indexOf(sg) == 0) {
        sidste = opts[i];
        nummer = lt[i];
        lt[lt.length] = opts[i];
        frm.liste.length = lt.length;
        }
    }
   

    if(lt.length == 0) {
    //alert('intet fundet, marker indtastning');
    //frm.send.focus();
    }

    if(lt.length == 1) {
    //alert('kun en, marker den');
        for (i=0;i<opts.length;i++) {
        frm.liste.options[i].text = sidste;
        frm.liste.options[i].value = nummer;
        frm.liste.options[i].selected = true;
        frm.ord.focus();
        return false;
        }
    }

    for (i = 0; i < lt.length; i++) {
    frm.liste.options[i].value = lt[i];
    frm.liste.options[i].text = lt[i];
    }
    frm.liste.selectedIndex = -1;
}
</script>
</head>
<body onLoad="document.frm.ord.value = ''; document.frm.liste.selectedIndex = -1; document.frm.ord.focus();">

<?
echo 'ord: ' . $_GET['ord'];
echo 'select: ' . $_GET[''];
?>

<form name="frm">
<input type="text" name="ord" onkeypress="opdater(this.form);" onKeyUp="opdater(this.form);" style="width: 150px;">
<br>
<script>
document.write('<select size="' + opts.length + '" name="liste" style="width: 150px;">');
for (i = 0; i < opts.length; i++)
document.write('<option value="' + opts[i] + '">' + opts[i] + '</option>');
document.write('<select>');
</script>
<br><br>
<input type="submit" name="send" value="Send">
</form>
</body>
</html>
Avatar billede jensb Nybegynder
26. august 2004 - 00:06 #17
Så er den der næsten.

Hvis jeg direkte vælger fra listen med musen, så er det ok, og det rigtige ord bliver sendt.

Hvis jeg fuldt ud skriver et ord, så bliver det rigtige ord også sendt.

Den eneste problem nu, ser ud til at være, når jeg taster et par bogstaver, indtil et ord at autoselected. Nå jeg så sender, så bliver der kun sendt de bogstaver jeg selv har tastet, og ikke hele ordet.
Avatar billede jensb Nybegynder
26. august 2004 - 00:08 #18
Jeg går ud fra at PHP'en kun er til at vise resultatet, og ikke ellers har noget med funktionen at gøre? korrekt?
Avatar billede Slettet bruger
26. august 2004 - 09:58 #19
Jep :)
Avatar billede keysersoze Ekspert
26. august 2004 - 10:50 #20
jeg blander mig lige engang :)

Jeg har sidder og roddet med ovenstående, og det er sådan set fint nok - men hvad nu hvis man vil have en anden value end text? altså 1 for albatros - 2 anders etc...
Avatar billede jensb Nybegynder
26. august 2004 - 10:56 #21
Tja, burde man ikke kunne lave 2 arrays, hvor det ene indeholder navnene, og det andet indeholder values?

Faktisk ville det gøre det bedre endnu, da jeg har et unikt skuespiller ID i min database. Men hvis det ikke kan lade sig gøre, så må jeg bare søge på navnet i databasen efterfølgende.
Avatar billede keysersoze Ekspert
26. august 2004 - 11:16 #22
den har jeg løst - vil bare lige udvikle den færdig så skal jeg nok poste.
Avatar billede jensb Nybegynder
26. august 2004 - 11:33 #23
Ok, det lyder cool
Avatar billede keysersoze Ekspert
26. august 2004 - 12:53 #24
Nogle af tingene er taget ud af en sammenhæng da det jo er tilpasset mit script - men sådan i store træk ser det sådan ud;

------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title><%=TITLE%></title>
   
    <link rel="stylesheet" type="text/css" href="../../wizard.css">
   
    <script type="text/javascript">

    function opdater(frm) {

        if (event.keyCode == '13') {
            alert('du kan ikke trykke enter');
        }

        sg = frm.ord.value.toLowerCase();
        ordoptions = new Array();
        ordids = new Array();

        for (i = 0; i < myoptions.length; i++) {
            if (myoptions[i].toLowerCase().indexOf(sg) == 0) {
                sidste = myoptions[i];
                nummer = myids[i];
                ordoptions[ordoptions.length] = myoptions[i];
                ordids[ordids.length] = myids[i];
                frm.id.length = ordoptions.length;
            }
        }

        if (ordoptions.length == 0) {
            frm.id.options[0].value = '- insert new -';
            frm.id.options[0].text = '- insert new -';
            frm.id.options[0].selected = true;
            frm.ord.focus();
            return false;
        }

        if(ordoptions.length == 1) {
            for (i=0;i<myoptions.length;i++) {
                frm.id.options[i].text = sidste;
                frm.id.options[i].value = nummer;
                frm.id.options[i].selected = true;
                frm.ord.focus();
                return false;
            }
        }

        for (i = 0; i < ordoptions.length; i++) {
            frm.id.options[i].value = ordids[i];
            frm.id.options[i].text = ordoptions[i];
        }
        frm.id.selectedIndex = -1;
    }
   
    function checkform() {
        thisform = document.data;
       
        if (thisform.id.value != '- insert new -') {
            thisform.action = '<%=FILE_NAME%>.asp?wizard_id=<%=WIZARD_ID%>&menustep=<%=MENUSTEP%>&step=<%=STEP%>';
        } else {
        document.data.ok7.value = '- insert new -';
        }
       
        thisform.submit();
        return false;
    }
   
    </script>
   
</head>

<body>

<%
SQL = "SELECT * FROM area ORDER BY name"
Set AREASELECT = DBConn.Execute(SQL)
%>

<form name="data" action="../action/values_to_db.asp?wizard_id=<%=WIZARD_ID%>&menustep=<%=MENUSTEP%>&step=<%=STEP%>" method="post">
<input type="hidden" name="ok7" value="">
<table border="0" cellpadding="0" cellspacing="0" class="selecttable">
<tr>
    <td class="normaltext" width="17">&nbsp;
    </td>
    <td class="normaltext">
        number<br>
        <input type="text" name="ord" onkeypress="opdater(this.form);" onKeyUp="opdater(this.form);" class="inputfelt2">
        <script type="text/javascript">
            document.write('<select size="5" name="id" class="inputfelt2">');
                document.write('<option value="- insert new -">- insert new -</option>');
                myids = new Array();
                myoptions = new Array();
                myids[myids.length] = '- insert new -'
                myoptions[myoptions.length] = '- insert new -'
                <%
                Do While not AREASELECT.eof
                %>
                document.write('<option value="<%=AREASELECT("id")%>"><%=AREASELECT("name")%></option>');
                myids[myids.length] = '<%=AREASELECT("id")%>'
                myoptions[myoptions.length] = '<%=AREASELECT("name")%>'
                <%
                AREASELECT.movenext
                Loop
                %>
            document.write('<select>');
        </script>
    </td>
    <td class="continue">
        <a href="java script:void(0);" onclick="return checkform();"><img src="../images/button_continue.gif" border="0" alt=""></a>
    </td>
</tr>
</table>
</form>

<%
AREASELECT.Close
Set AREASELECT = Nothing
%>
Avatar billede jensb Nybegynder
26. august 2004 - 13:26 #25
YES, det virker. Perfekt

Jeg har slettet
      if (event.keyCode == '13') {
            alert('du kan ikke trykke enter');
        }
Det skulle der vel ikke ske noget ved?

I har jo begge to hjulpet til, så er det ikke mest fair, at i bare deler pointene? Selvom det i sidste ende er keysersoze's løsning jeg bruger?
Avatar billede Slettet bruger
26. august 2004 - 13:29 #26
Det er jo op til dig, men i fald der skulle falde lidt af er her et svar ;)
Avatar billede keysersoze Ekspert
26. august 2004 - 13:48 #27
bare del eller gør hvad du finder bedst - jeg fik lige så meget ud af det som dig ;)

den if-sætning du har slettet bruger jeg i mit script - bare på en anden måde end skrevet i eksemplet.
Avatar billede jensb Nybegynder
26. august 2004 - 13:50 #28
Jamen så siger jeg tak til jer begge.

Det var superlækkert at få denne funktion.
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