[Ajax/Javascript] Zoek en selecteer

[TheTec]

Om het selecteren uit een grote lijst (>1000 items) gemakkelijker te maken, heb ik een soort dynamisch selectiefilter gemaakt, waarmee je terwijl je typt het resultaat in een multiple select item ziet en je middels toevoegen en verwijderen knoppen items in je resultaat kan selecteren en verwijderen. Deze functionaliteit zal deel uit gaan maken van een groter formulier.

Ik heb het geheel werkend in Firefox, maar IE7 weigert dienst. Ik heb gezocht op internet naar oorzaken hiervan, maar heb eigenlijk te weinig aanknopingspunten om écht goed mee te zoeken, dus ik vond dan ook niks. Ik hoop dat iemand van jullie weet waar het aan zou kunnen liggen...

Hier is mijn Ajax-script (gebaseerd op de w3c-ajax-tutorial):

JavaScript:

function GetXmlHttpObject() {
    var xmlHttp=null;
    try { // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    } catch (e) {
        // Internet Explorer
        try {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                alert("Your browser does not support AJAX!");
                return false;
            }
        }
    }
    return xmlHttp;
}
function stateChanged() {
    if (xmlHttp.readyState==4) { 
        document.getElementById('select').innerHTML=xmlHttp.responseText;
    }
}
function populate() {
    xmlHttp = GetXmlHttpObject();
    if (xmlHttp) {
        xmlHttp.onreadystatechange = stateChanged;
        xmlHttp.open("GET","intellisearch.php?q="+document.getElementById('search').value,true);
        xmlHttp.send(null);
    }
}

En dit zijn de bijbehorende event-functies:

JavaScript:

function select() {
   document.SearchAndSelect.selectedbox[document.SearchAndSelect.selectedbox.length] = 
     new Option(
      document.SearchAndSelect.selectbox[document.SearchAndSelect.selectbox.selectedIndex].text, 
       document.SearchAndSelect.selectbox[document.SearchAndSelect.selectbox.selectedIndex].value, 
       false
     );
}

function remove() {
    document.SearchAndSelect.selectedbox.options[document.SearchAndSelect.selectedbox.options.selectedIndex] = null;
}

function empty() {
  document.SearchAndSelect.selectbox.options.length = 0;
  populate();
}

Ik vermoed dat het met name in deze laatste event-scripts zit, maar ik kan niet vinden wat dan het probleem is.

Je kan de functionaliteit hier in werking zien: http://www.scholtobos.dds.nl/redactie/intellisearch.php
Er staan pas drie testitems in de lijst, maar je ziet snel genoeg dat het in IE niet werkt... Ik hoop dat jullie iets weten, in elk geval alvast bedankt voor de moeite!

[Megamind]

zowiezo zou ik maar eens gebruik maken van getElementById dat scheelt al een hoop gezeur!

[TheTec]

Megamind schreef op donderdag 03 mei 2007 @ 22:56:
zowiezo zou ik maar eens gebruik maken van getElementById dat scheelt al een hoop gezeur!

Je bedoelt dat het dan wel gaat werken in IE? Ik dacht dat je bij formulieren ook prima op deze wijze kon werken.

[TheTec]

Dat lost het inderdaad op! Mijn dank voor deze supersnelle oplossing!

[crisp]

TheTec schreef op donderdag 03 mei 2007 @ 22:54:
Hier is mijn Ajax-script (gebaseerd op de w3c-ajax-tutorial):

Ik neem aan dat je w3schools bedoelt? Die site heeft niets, maar dan ook niets met w3c te maken. In fact: de meeste tutorials daar zijn maar van middelmatige kwaliteit, en de Ajax tutorial is om te huilen.

Sowieso is het afvuren van een request bij elk key-event al vragen om problemen.
Verder staat IE (iig 6) niet toe om de innerHTML van een <select> aan te passen.

[TheTec]

crisp schreef op donderdag 03 mei 2007 @ 23:16:
[...]

Ik neem aan dat je w3schools bedoelt? Die site heeft niets, maar dan ook niets met w3c te maken. In fact: de meeste tutorials daar zijn maar van middelmatige kwaliteit, en de Ajax tutorial is om te huilen.

Sowieso is het afvuren van een request bij elk key-event al vragen om problemen.
Verder staat IE (iig 6) niet toe om de innerHTML van een <select> aan te passen.

Aha, goede tip over w3cschools (want die bedoel ik inderdaad), ik vind een erg informatieve site met goed te volgen instructies. Wat is er zo verkeerd aan deze Ajax-constructie dan? Het zal je vast niet verbazen als ik zeg dat ik pas sinds een paar weken met Ajax aan het stoeien ben en dit is de eerste echt serieuze toepassing daarvan. Wat zou het alternatief zijn ipv op een key-event te triggeren? Het idee is dat het zoekresultaat bij iedere letter die je toevoegt bijgewerkt wordt...

Onder IE7 werkt het in elk geval en dat is vooralsnog het belangrijkste (vind mijn opdrachtgever, het is voor een beperkte doelgroep, die allemaal de opdracht krijgen FireFox of Opera te gebruiken, of anders tenminste IE7).

[crisp]

TheTec schreef op vrijdag 04 mei 2007 @ 17:58:
[...]

Wat zou het alternatief zijn ipv op een key-event te triggeren? Het idee is dat het zoekresultaat bij iedere letter die je toevoegt bijgewerkt wordt...

Om te beginnen kan je de resultaten voor 'ab' natuurlijk al destileren uit de resultaten die je eerder voor 'a' hebt opgehaald, en daarbij ben je effectief je server aan het DOSsen - zeker als je iemand hebt die met 150 aanslagen per minuut een woord aan het intypen is (in dat geval is het handiger om het request met een delay op te starten en te cancellen op het moment dat er nog verder getyped wordt).

Onder IE7 werkt het in elk geval en dat is vooralsnog het belangrijkste (vind mijn opdrachtgever, het is voor een beperkte doelgroep, die allemaal de opdracht krijgen FireFox of Opera te gebruiken, of anders tenminste IE7).

Zeker op het gebied van XHR verschillen de implementaties nogal (niet zo gek aangezien andere browservendors de behavior van IE hebben moeten reverse-engineeren) dus enkel testen in IE(7) is dan nogal karig. Een stresstest lijkt me ook wel op z'n plaats - zelfs al is de beoogde doelgroep maar klein.

Op de technische kant van je script kom ik later nog terug, ik kan je wel alvast wijzen naar een (eigen) blogpost waaruit blijkt dat je er niet zomaar vanuit kan gaan dat de scope van je onreadystatechange-handler de global scope is (dat is 'ie enkel in IE): http://therealcrisp.xs4al...-and-the-scope-of-events/

[TheTec]

crisp schreef op vrijdag 04 mei 2007 @ 18:06:
[...]

Om te beginnen kan je de resultaten voor 'ab' natuurlijk al destileren uit de resultaten die je eerder voor 'a' hebt opgehaald, en daarbij ben je effectief je server aan het DOSsen - zeker als je iemand hebt die met 150 aanslagen per minuut een woord aan het intypen is (in dat geval is het handiger om het request met een delay op te starten en te cancellen op het moment dat er nog verder getyped wordt).

[...]

Zeker op het gebied van XHR verschillen de implementaties nogal (niet zo gek aangezien andere browservendors de behavior van IE hebben moeten reverse-engineeren) dus enkel testen in IE(7) is dan nogal karig. Een stresstest lijkt me ook wel op z'n plaats - zelfs al is de beoogde doelgroep maar klein.

Op de technische kant van je script kom ik later nog terug, ik kan je wel alvast wijzen naar een (eigen) blogpost waaruit blijkt dat je er niet zomaar vanuit kan gaan dat de scope van je onreadystatechange-handler de global scope is (dat is 'ie enkel in IE): http://therealcrisp.xs4al...-and-the-scope-of-events/

Heel erg bedankt, ik ga me er (verder) in verdiepen. Dat van die 150 aanslagen per minuut is een goede inderdaad!