Texteingabe bei DropDown. Auswahl nicht auf erstes Zeichen beschränken

Alles was sich mit dem Thema dynamische XML Formulare auf Basis des LiveCycleDesigners beschäftigt
Antworten
mas498
Beiträge: 10
Registriert: 17.10.2010, 12:11

Texteingabe bei DropDown. Auswahl nicht auf erstes Zeichen beschränken

Beitrag von mas498 » 21.10.2010, 08:27

Situation:
es geht um Rezepte. User muss Zutaten eingeben, die meisten Zutaten sind als Dropdown hinterlegt und eine Eingabe ist optional.

Jetzt möchte ich gerne, dass wenn der User auf das DropDown Feld klickt und die ersten paar Buchstaben eingibt, ihm eine Auswahl vorschlagt.

Beispiel:

Eingabe "Wei"
Weizenbier
Weizenmehl
Weizenstärke
...
dann kann der User entscheiden ob er die Zutat weiter eintippen möchte (falls keine Übereinstimmung mit Wert aus Dropdown wird diese als neue Zutat gespeichert) oder eine aus der Auswahl nehmen möchte.
Dies erleichtert die Eingabe und ermöglicht mir, dass alle User tendenziell Zutaten gleich ausschreiben.

Im Moment ist dies nur mit dem ersten Buchstaben möglich. Gibt es eine Möglichkeit, dass auch mehrere Buchstaben zugelassen sind?

Vielen Dank

Matthias

Benutzeravatar
nele_sonntag
Beiträge: 2742
Registriert: 04.05.2009, 15:12
Wohnort: Frankfurt
Kontaktdaten:

Texteingabe bei DropDown. Auswahl nicht auf erstes Zeichen beschränken

Beitrag von nele_sonntag » 22.10.2010, 12:41

Hallo Matthias,

weiß nicht, wie fit Du mit Javascript bist und evtl. diese Lösungsmöglichkeit für "normales Java" für den LCD anpassen kannst?

http://webmasterparadies.de/scripting-tipps/javascript/135-mittels-javascript-in-einem-dropdown-menue-suchen-und-auswaehlen.html

Code: Alles auswählen

<html>
<head>
<script language="JavaScript">
<!--
function Eingabe(Wert)
{
    for(i = 0; i < document.getElementById('Autohersteller').options.length; i++)
    {
        if(Wert.substr(0, Wert.length).toLowerCase() ==  document.getElementById('Autohersteller').options[i].value.substr(0,  Wert.length).toLowerCase() && Wert.length != 0)
        {
            document.getElementById('Autohersteller').options[i].selected = true;
            break;
        }
    }
}
//-->
</script>
<title>Mittels JavaScript in einem Dropdown-Menü suchen und auswählen</title>
</head>
<body>

<input name="Hersteller" onKeyUp="Eingabe(this.value);" type="text"><br>
<select id="Autohersteller" size="5">
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Citroen">Citroen</option>
<option value="Daewoo">Daewoo</option>
<option value="Excalibur">Excalibur</option>
<option value="Fiat">Fiat</option>
<option value="Geely">Geely</option>
<option value="Hyundai">Hyundai</option>
<option value="Isuzu">Isuzu</option>
<option value="Jaguar">Jaguar</option>
<option value="Kia">Kia</option>
<option value="Lamborghini">Lamborghini</option>
<option value="Maserati">Maserati</option>
<option value="Nissan">Nissan</option>
<option value="Opel">Opel</option>
<option value="Porsche">Porsche</option>
<option value="Qvale">Qvale</option>
<option value="Rolls-Royce">Rolls-Royce</option>
<option value="Saab">Saab</option>
<option value="Toyota">Toyota</option>
<option value="UAZ">UAZ</option>
<option value="Volkswagen">Volkswagen</option>
<option value="Walter">Walter</option>
<option value="X-Firma">X-Firma</option>
<option value="Y-Firma">Y-Firma</option>
<option value="Zotye">Zotye</option>
</select>

</body>
</html>
Erläuterung:
Kopieren Sie dieses Beispiel in ein neues HTML-Dokument und geben Sie in das Textfeld einfach mal ein "Y" ein. Schon landen Sie in der Dropdown-Liste automatisch bei dem Eintrag "Y-Firma". Natürlich funktioniert dies auch bei Listen, in denen der gleiche Anfangsbuchstabe mehrmals vorkommt. Gibt der Benutzer weitere Buchstaben in das Textfeld ein, versucht das JavaScript genauere Übereinstimmungen zu finden und springt anschließend automatisch dort hin.

LG Mandy


mas498
Beiträge: 10
Registriert: 17.10.2010, 12:11

Texteingabe bei DropDown. Auswahl nicht auf erstes Zeichen beschränken

Beitrag von mas498 » 22.10.2010, 20:42

Hi Mandy

danke für deine Mühe & Recherche.

Leider ist mein Wissen über JavaScript nicht gross, mir gefällt die Idee, mein Wissen reicht wohl nicht aus um die Fragestellung zu lösen.

Daher: falls jemand eine Idee hat oder nur ein bisschen weiterkommt.. wäre super!!

Hier noch ein link: http://forums.adobe.com/thread/529013
nicht die Lösung, da sehr mühsam. Aber eventuell könnte es beim einen anderen von euch, oder gar bei mir? "klick" machen ;-)

LG
Matthias

P.S.: werde in der Zwischenzeit ein bisschen rumprobieren. Falls ich auf die Lösung komme, wird die selbstverständlich umgehend gepostet

mas498
Beiträge: 10
Registriert: 17.10.2010, 12:11

Texteingabe bei DropDown. Auswahl nicht auf erstes Zeichen beschränken

Beitrag von mas498 » 24.10.2010, 16:21

Lösungsvorschlag Nummer 2
http://forums.adobe.com/thread/518910?tstart=210

wenn man jetzt noch den Text aus der Liste auswählen könnte, mit Mouse, Enter oder Pfeiltasten und dann ins Texftfeld übernehmen. Das wäre super.
Darum auch den Lösungsansatz mit einem Dropdown

Bin dran.. aber stosse immer wieder gegen eine Mauer :-)

Gruss
Matthias

mas498
Beiträge: 10
Registriert: 17.10.2010, 12:11

Texteingabe bei DropDown. Auswahl nicht auf erstes Zeichen beschränken

Beitrag von mas498 » 13.11.2010, 00:16

Und wieder einen Schritt weiter, aber noch nicht ganz am Ziel.

Es geht immer noch darum, dass während der Eingabe ein Vorschlag zur Autovervollständigung gemacht werden soll. Ähnlich wie auf google.com bei der Eingabe vom Suchbegriff.
Dieses ist auch unter den Namen: type ahead, intellisense bekannt.

Meine (Zwischen)Lösung die mich noch nicht zufriedenstellt. Könnt ihr mir da helfen?

Bei der Eingabe wird die Auswahl des Dropdowns eingeschränkt (von links nach rechts).
Jedoch muss man auf den Pfeil klicken um die Einträge anzuzeigen.

Wirft doch ein Blick darauf, vielleicht kommt jemand eine gute Lösung in Sinn.

Vielen Dank
Matthias
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.

mas498
Beiträge: 10
Registriert: 17.10.2010, 12:11

Texteingabe bei DropDown. Auswahl nicht auf erstes Zeichen beschränken

Beitrag von mas498 » 21.11.2010, 15:29

Hallo miteinander

Vorschlag bei Texteingabe ("Autosuggest"): für mich, dank Eure Inputs, insbesondere Mandy, gelöst. Danke!

Funktionsweise:
Bei Eintritt in das Feld öffnet sich das Dropdown Menu, während der Eingabe wird die Auswahl im Dropdownmenu eingeschränkt.

Eigentlich eine ganz simple Sache ;)
Gruss
Matthias
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.

Benutzeravatar
nele_sonntag
Beiträge: 2742
Registriert: 04.05.2009, 15:12
Wohnort: Frankfurt
Kontaktdaten:

Texteingabe bei DropDown. Auswahl nicht auf erstes Zeichen beschränken

Beitrag von nele_sonntag » 21.11.2010, 18:34

Hallo mas498,

super, was Du da hinbekommen hast. Sollte ich durch irgendetwas (Ich kann's mir gar nicht vorstellen.) dazu beigetragen haben, um so besser :-)

Werde es für mich auch mal archivieren.

Tolle Arbeit!!

LG Mandy

ciberadobe
Beiträge: 29
Registriert: 16.09.2010, 11:27

Texteingabe bei DropDown. Auswahl nicht auf erstes Zeichen beschränken

Beitrag von ciberadobe » 19.01.2011, 15:46

Hallo Matthias (mas498) .

Möchte mich hier für Dein Beispiel und Deine Bemühungen bedanken.

Was Du hier realisiert hast, hatte ich jetzt auch gebraucht und konnte in

meinem ADOBE PDF Formular (offline, dynamisch, in SAP entwicklet und erzeugt)  nachbauen.

Hätte da noch eine Frage, als Erweiterung zu dem Beispiel.

Ob Du eventuel ein Beispiel hast, wo man frei eingegebenen Wert gegen die Werte aus der DropDown Liste prüft und nur wenn Wert aus der Liste, darf das Feld verlassen werden. Aber das wäre ja fast zu viel des Guten.

Auf jeden Fall Danke.

Grüße

ciberadobe

swith2on
Beiträge: 7
Registriert: 19.01.2013, 23:07

Texteingabe bei DropDown. Auswahl nicht auf erstes Zeichen beschränken

Beitrag von swith2on » 24.01.2018, 21:39

Hallo,

deine/eure Mühe hat mir ebenfalls sehr geholfen, jedoch bitte ich um Hilfe bei der Anpassung wenn die Daten schon in der DropDown Liste vorhanden sind.
Bei der ZutatenListe wird auf externe XML zugegriffen, ich aber möchte die DDL Liste nutzen.

Offensichtlich habe ich die Funktion nicht verstanden.

Code: Alles auswählen

for (var i = 0; i < list.length; i)
	{
		var ingredient = list.item(i);
		ingredientList.addItem(ingredient.name.value, ingredient.index.toString());
		
	}
Gruß, Matthias

Antworten