Autocomplete met een selectie veld

[rmfloris]

Ik heb op het moment meerdere (dezelfde) selectielijsten waar ik een waarde selecteer. Als ik alle selectie velden heb ingevuld, stuur ik alles naar de DB waar de ID's van iedere selectie worden weggeschreven.

Aangezien de lijst nu groter en groter begint te worden is makkelijker om het geheel van een autocomplete te voorzien. Alleen alle variante die op het internet ben tegen gekomen gaan uit van een text field en niet van een selectie. Je kan erom heen door een input field voor je selectie te plaatsen, alleen hier is eigenlijk geen ruimte voor. Het probleem waar ik tegenaan loop is dat ik bij alleen gebruik van het text field geen id meestuur voor de DB.

Dus mijn vraag is of iemand bekend is met een oplossing, waar je zowel je autocomplete hebt, maar nog wel de ID behorend bij de waarde beschikbaar is? Anders loop ik met helemaal gek te zoeken voor iets wat er niet is. Als het er namelijk niet is, moet ik ga nadenken hoe ik de hele pagina omgooi zodat ik het input gedeelte erbij kan zetten.

Alvast bedankt voor de tips.

[Rekcor]

Op internet staan inderdaad heel veel combobox-oplossingen (want zo heten die dingen). Wat je kunt doen is dat je zo'n combox-oplossing pakt en er dan met Javascript voor zorgt dat de ID van de selectlist in een hidden input wordt gezet, zodra de gebruiker een keuze maakt. Deze hidden input wordt gewoon meeverstuurd met het formulier.

[ Voor 3% gewijzigd door Rekcor op 03-09-2008 19:21 ]

[rmfloris]

Om het duidelijk voor mij te krijgen. Je hebt dan een input veld en een drop down list? Maar dan hoef je toch geen hidden field meer te hebben want de info staat al in je drop down list. Of begrijp ik je verkeerd?

[Borizz]

Ik zou gewoon een selectbox gebruiken in je html (voor al sjs is uitgeschakeld) die geef je een bepaalde class (autoComplete o.i.d.). Nadat de content geladen is verberg je alle selectboxen met de class 'autoComplete' en zet je in plaats daarvan een tekstveld neer die bij het typen zijn waardes ophaalt uit de verborgen selectbox. Op het moment dat je via het tekstveld een waarde selecteert, zet je met javascript de value van de selectbox op de juiste waarde en je bent klaar. Er zijn verder geen hidden fields nodig en je hoeft niet te knutselen met je form element names.

[MBV]

Zit hier echt niks tussen?
http://www.javascript-examples.com/autocomplete-demo/: meerdere demo's onder elkaar gelinkt.
http://www.mattkruse.com/javascript/autocomplete/index.html: dit moet zeker lukken, selectie uit een dropdown.

Als je die van Kruse te lelijk vindt, of als je teveel items hebt (en je dus niet alles direct naar de client wil sturen, bij google suggest is dat bijv niet echt practisch) zal je denk ik een van de anderen (bijv scriptaculous) moeten aanpassen. Je slaat het id op in de <li> waar de tekst in staat, en gooit bij selectie de id in een hidden input. Als het framework een beetje netjes in elkaar zit zal dat niet gek veel werk zijn.

Bij een beperkt aantal items is de oplossing van Borizz ook een goeie, maar het blijft veel werk. Bedenk wel dat mensen zullen proberen een verkeerde waarde in te vullen, en handel dat goed af

[rmfloris]

Bedankt. het voorbeeld van Matt had ik inderdaad ook gevonden en was mijn alternatief.

Waar ik tegenaanloop bij het voorbeeld van Matt is dat het werk op de .value van de selectie. Hier wil ik graag de ID waardes houden. Maar dan werkt het script natuurlijk niet naar behoren. Naar mijn weten kan je het script niet laten werken op de content ipv waarde bij een selectie.

Om het geheel duidelijker te maken, zo ziet mijn selectie eruit (alleen de opties)

HTML:

<option value=1>Waarde 1
<option value=2>Waarde 2
<option value=34>Waarde 3
<option value=99>Waarde 4

De ID's die in de value staan worden hierna in de DB gestopt, werken met de waardes wordt dan lastig.

Is hier een makkelijke manier om dit op te lossen of zal ik toch naar een compleet ander script moeten gaan kijken?

[P.O. Box]

rmfloris schreef op donderdag 04 september 2008 @ 10:36:
Bedankt. het voorbeeld van Matt had ik inderdaad ook gevonden en was mijn alternatief.

Waar ik tegenaanloop bij het voorbeeld van Matt is dat het werk op de .value van de selectie.

denk je niet dat er nog een tegenhanger is van de .value variant die je in het voorbeeld van Matt zo zou kunnen veranderen?

[rmfloris]

Edwardvb schreef op donderdag 04 september 2008 @ 10:49:
[...]


denk je niet dat er nog een tegenhanger is van de .value variant die je in het voorbeeld van Matt zo zou kunnen veranderen?

Volgens mij is die er, alleen heb ik geen idee hoe die heet. Ik zat eerste te denken aan elementID, maar daar kwam ik ook niet uit. Daarnaast gebruiken alle voorbeelden de .value optie en dat zal een reden hebben. Waar zat jij zelf aan te denken?

[P.O. Box]

zoiets:

field.options[field.selectedIndex].text

[moozzuzz]

Persoonlijk heb ik zoiets onlangs gemaakt ivm user-selectie:

Opbouw:

• onKeyup-ajax-je (mijn eerste :^) dat de gesuggereerde gebruikers in een divje toont.
• onClick-scriptje dat een hidden input vult met het corresponderende id (je klikt dan op een gewenste username in de div):

HTML:

<li onClick="document.forms[0][0].value=1003; document.forms[0][1].value=this.title; document.getElementById('complete_leden').innerHTML='';" title="Naam Voornaam">Naam Voornaam met highlighting</li>