[JS] Selectie box doet vreemd in IE

[Steven]

Hoi,

Wat ik heb
Ik wilde een soort van 'encarta-achtig' text-box maken waarbij je in een text-box een naam (van een stad) kan typen waarna alle mogelijkheden met die eerste letters eronder verschijnt (in een list). Die namen kan je aanklikken waarna de naam in de text-box verschijnt. Staat er eenmaal een goede naam dan mag de lijst verdwijnen.

Kan me niet voorstellen dat iedereen het snapt; maar hier een voorbeeld waarbij het duidelijk wordt www.heijtel.nl/got.html.

Het probleem
Voor de firefox-mensen: in deze browser werkt dit perfect. Alleen dan Internet Explorer. Als je daar "amstelv" intypt dan krijg je Heerhugowaard te zien?!? Is dit een bug van mij of een bug van IE? Ik zou echt niet weten waar ik moet zoeken. Zeker omdat het in FF wel werkt.

[ Voor 4% gewijzigd door Steven op 17-06-2005 01:58 ]

[NMe]

Javascript hebben we liever bij alle andere clientside zaken in Webdesign & Graphics staan, zoals je ook in onze FAQ had kunnen lezen. Ik zal je topic even op de goede plaats zetten.

PW>>WG

[Verwijderd]

Bij mij lijkt hij het wel goed te doen in IE 6. Het gaat pas mis als er nog maar 1 waarde in de listbox voldoet. Als ik 'amste' type dan scrollt het lijstje netjes naar amstelveen, amsterdam etc. Als ik nou amstel type, dan gaat het helemaal fout.
.
.

JavaScript:

function listupdate(string) {
    var result = Array();
    
    var list = searchList(string, cities);
    var selectList = document.getElementById('list');

    for (i = 0; i < selectList.options.length; i++) {
        selectList.remove(i);
    }
    selectList.style.visibility = "hidden";
    if (list.length == 0 || (list.length == 1 && string.toLowerCase() == list[0].toLowerCase())) return;

    if (list.length <= 5) selectList.size = list.length;
    else selectList.size = 5;
    
    
    for (i = 0; i < list.length; i++) {
        selectList.options[i] = new Option(list[i], list[i]);
    }
    selectList.style.visibility = "visible";
}

De searchlist functie lijkt me in orde. Probeer hier op regel 13 eens de voorwaarde toe te voegen dat de 'selectList' een size van 2 of groter moet hebben, misschien lost dat het probleem op.

[ Voor 9% gewijzigd door Verwijderd op 17-06-2005 08:52 ]

[crisp]

dit gaat niet goed:

JavaScript:

for (i = 0; i < selectList.options.length; i++) {
    selectList.remove(i);
}

maak daar dit van:

JavaScript:

for (i = 0; i < selectList.options.length; i++) {
    selectList.remove(0);
}

of

JavaScript:

selectList.options.length = 0;

[Steven]

Wouw; 2 oplossingen en gezamenlijk zijn het de oplossing.
@crips:
Dat is idd de oplossing voor het 'heerhugowaard'-probleem. Het ontgaat me alleen een beetje waarom het in Firefox wel werkt. Alsof de index-waardes van de selectList niet snel genoeg bijgewerkt worden ofzo?

@websjwans:
Raar trouwens dat jij het probleem niet hebt in IE. Je oplossing werkt wel; hij heeft moeite met een list van lengte 1 blijkbaar. Als er nu nog maar 1 mogelijkheid is dan maakt hij de list gewoon size = 2.


Op http://www.heijtel.nl/got2.html staat nu de aangepast versie die wel werkt.

[Steven]

En nog even voor de analen de uiteindelijke code:

JavaScript:

data = array("Amsterdam", "Amstelveen", "Amersfoort", "Alkmaar", "Amsterdam CS", "Anderlecht");

function searchList(string, list) {
    //result = Array(data.length);
    var j = 0;
    var result = Array();
    for (var i = 0; i < list.length; i++) {
        if (list[i].substr(0, string.length).toLowerCase() == string.toLowerCase()) {
            result[j++] = list[i];
        }
    }
    return result;
}

function listupdate(string) {
    var result = Array();
    
    var list = searchList(string, cities);
    var selectList = document.getElementById('list');

    for (i = 0; i < selectList.options.length; i++) {
        selectList.remove(i);
    }
    selectList.style.visibility = "hidden";
    if (list.length == 0 || (list.length == 1 && string.toLowerCase() == list[0].toLowerCase())) return;

    if (list.length <= 5) selectList.size = list.length;
    else selectList.size = 5;
    
    
    for (i = 0; i < list.length; i++) {
        selectList.options[i] = new Option(list[i], list[i]);
    }
    selectList.style.visibility = "visible";
}

</script>

<input type="text" id="city" name="city" value="" onkeyup="listupdate(this.value);">
<br><br><br><br><br>
<select name="list" id="list" size="5" style="visibility: hidden;" onclick="document.getElementById('city').value = this.value; listupdate(document.getElementById('city').value);">
</select>

[GigaDave56]

Ik werk met Firefox en helaas werkt het hier ook niet (versie 1.0.4) Ik hou op het eind ook een verkeerde keuze over.
Sterker nog, als ik Tegelen intyp, krijg ik vanaf TEG tot TEGEL alleen maar foute keuzes, terwijl er geen andere optie is die hierop lijkt. Hetzelfde met AALSM tot AALSMEER.
Als ik backspace vanaf AALSMEER dan klopt de keuze lijst wel. Aalsmeer blijft staan tot AALS

edit:
1. weggeknipt, crisp zegt het al

edit:
2. de tweede versie werkt hier wel, al staat het wat vreemd

edit:
3. in de hierboven gepostte code heb je crisps oplossing niet gebruikt. in je website wel

[ Voor 26% gewijzigd door GigaDave56 op 17-06-2005 10:15 . Reden: reactie op correctie code ]

[Steven]

Nou je het zegt; maar ik neem aan dat het bij de 2e versie (http://www.heijtel.nl/got2.html) wel werkt?

[Verwijderd]

Voor mij in IE6 en FireFox 1.0.2 werkt het in ieder geval prima nu.

Mogen we deze code gewoon hergebruiken trouwens? Kan altijd nog een keer van pas komen, vooral als het lijstje van plaatsnamen compleet is

[Mithrandir]

offtopic:
de lijst van plaatsnamen is niet compleet; 'wolvega' mist bijvoorbeeld. (En dat is toch een redelijk grote plaats)

[ Voor 15% gewijzigd door Mithrandir op 17-06-2005 11:58 ]

[Steven]

Verwijderd schreef op vrijdag 17 juni 2005 @ 10:50:
Voor mij in IE6 en FireFox 1.0.2 werkt het in ieder geval prima nu.

Mogen we deze code gewoon hergebruiken trouwens? Kan altijd nog een keer van pas komen, vooral als het lijstje van plaatsnamen compleet is

Tuurlijk; geen enkel probleem. Ik heb hem niet voor niets in het topic gezet.

Mithrandir schreef op vrijdag 17 juni 2005 @ 11:58:

offtopic:
de lijst van plaatsnamen is niet compleet; 'wolvega' mist bijvoorbeeld. (En dat is toch een redelijk grote plaats)

offtopic:
Dit is geen complete lijst plaatsen; maar plaatsen waar een bepaalde activiteit is.