Country Selector mit Autocomplete

stedoo · 3. Februar 2013, 10:33

Hallo zusammen,

ich habe auf baymard.com/labs/country-selector den Country Selector gefunden. Nun hab ich mir die FIles runtergeladen.

Der Ergebnis sieht wie folgt aus: stedoo.de/countrySelector/ .

Meine Frage ist nun:

Auf der Seite vom Country Selector wird ein Input Feld für die Eingabe genutzt. Bei dem Country Selector aus dem heruntergeladenen ZIP leider nicht.

Wie kann ich das umsetzen, dass ich hier auch eine Input Feld nutzen kann?

Gruß stedoo

bYemma · 3. Februar 2013, 10:37

Du nutzt doch ein Inputfeld, wo etwas eingegeben wird?? Oder willst du nur den Button entfernt haben?

Bodo06 · 3. Februar 2013, 10:56

Ich würde auch grade mal spontan sagen, dass bei dir alles funktioniert.

Wo ist das Problem?

stedoo · 3. Februar 2013, 11:04

Das ist es eben leider nicht.

so sieht der Quelltext aus. Ich würde gerne placeholder nutzen. Damit man nicht immer erst das "Select Country" aus dem Suchfeld entfernen muss

Quellcode

<select name="Country" id="country-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">
<option value="" selected="selected">Select Country</option>
<option value="Afghanistan" data-alternative-spellings="AF افغانستان">Afghanistan</option>
<option value="Åland Islands" data-alternative-spellings="AX Aaland Aland" data-relevancy-booster="0.5">Åland Islands</option>
<option value="Albania" data-alternative-spellings="AL">Albania</option>
<option value="Algeria" data-alternative-spellings="DZ الجزائر">Algeria</option>
<option value="American Samoa" data-alternative-spellings="AS" data-relevancy-booster="0.5">American Samoa</option>
<option value="Andorra" data-alternative-spellings="AD" data-relevancy-booster="0.5">Andorra</option>
<option value="Angola" data-alternative-spellings="AO">Angola</option>
<option value="Anguilla" data-alternative-spellings="AI" data-relevancy-booster="0.5">Anguilla</option>
<option value="Antarctica" data-alternative-spellings="AQ" data-relevancy-booster="0.5">Antarctica</option>
</select>

Alles anzeigen

bYemma · 3. Februar 2013, 13:58

Ah, jetzt ist es klar, was du meinst...

Dazu musst du den Code so modifizieren:
<select name="Country" id="country-selector" autofocus="autofocus" autocorrect="off" autocomplete="off" placeholder="Land">
<option value="" selected="selected">Hier darf nichts hinkommen</option>

Erklärung:
Die Attribute des ersten select werden automatisch in das neue input Feld übernommen (Steht so in der Doku )
Damit der Platzhalter aber überhaupt in Erscheinung treten kann, muss man in der zweiten Zeile den Inhalt des select-Feldes entfernen.

stedoo · 3. Februar 2013, 16:30

super es klappt. Danke Dir

bYemma · 3. Februar 2013, 20:28

Gerne

Bloodydiary · 4. Februar 2013, 11:43

Thread schließen?

Torben Brodt · 10. Februar 2013, 14:38

Thread als "erledigt markiert"

Quellcode

Teilen