Datalist Datenübernahme ins Textfeld

LionIV · 28. Dez. 2016

Hallo zusammen,
per Script fülle ich meine Dropdownliste per XMLHttpRequest mit Daten aus der Datenbank:

Code:

 <input type="text" name=EZ" list="pos"  id='EZ'  style='width:100px;'  onblur='setzeVorgaben1()'   onfocus="machsonstwas()"  >
                <datalist id="pos">
               <!--wird per Script gefuellt -->
                </datalist>
             </input>

das funktioniert wunderbar.
Nun möchte ich ausser der ausgelesenen NR noch die Bezeichnung anzeigen.
Funktioniert auch, indem ich den String im Request zusammenbaue.

In der datalist steht jetzt 'Nr Bezeichnung'

Jetzt mein Problem.
Beim Klick auf einen Eintrag werden NR und Bezeichnung ins Textfeld übernommen.
Soweit auch das Standardverhalten ok,
Ich möchte dort aber nur die NR aus der Liste übernehmen.
Hat dazu jemand ne Idee?

EDIT: Alternative wäre zu den Listeinträgen einen title zu setzen, so dass die Beschreibung beim Mouseover und nicht direkt im Feld angezeigt wird.
Ich denke das ist sogar besser, weil die Beschreibung durch die Längenbegrenzung in der Liste abgeschnitten wird.
Gibt es dazu ne Möglichkeit?
Ich danke euch

zirzofer · 28. Dez. 2016

hallo, das gezeigte codestück macht es leider so gut wie unmoeglich dir zu helfen.
onsbesondere wäre wichtig, wie denn die funktionen setzeVorgaben1() und machsonstwas() aussehen.
ps: setze eventlistener bitte per javascript, nicht im html! https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

LionIV · 28. Dez. 2016

hallo, die aufgerufenen Funktionen sind für die Liste nicht relevant. Sie setzen z.B. enable oder disable von diversen anderen Eingabefeldern in Abhängigkeit des Inhaltes meines Feldes.
Es geht mir darum, ob es möglich ist, den String aus der datalist auseinander zu nehmen und nur einen Teil davon ins Textfeld zu übernehmen, oder ob es geht, die Datalist breiter als das zugehörende Textfel zu machen.
Kann mir bitte wer erklären, warum die eventlistener per script und nicht im HTML gesetzt werden sollen?

Ich danke euch

zirzofer · 29. Dez. 2016

LionIV schrieb:
Es geht mir darum, ob es möglich ist, den String aus der datalist auseinander zu nehmen und nur einen Teil davon ins Textfeld zu übernehmen, oder ob es geht, die Datalist breiter als das zugehörende Textfel zu machen.

ich bin mir ziemlich sicher, dass das geht, was du willst, bloss versteh ich nich WAS. sorry, aber ohne code oder ne genauere erklaerung/schema kann ich da nich helfen

LionIV schrieb:
Kann mir bitte wer erklären, warum die eventlistener per script und nicht im HTML gesetzt werden sollen?

anderer scope, eval, funktionen müssen bereits vor element eingebunden sein, codewartung, trennung von html und js...
javascript - onclick="" vs event handler - Stack Overflow

PS: dein HTML ist invalide

mikdoe · 29. Dez. 2016

ich habs auch nicht verstanden. vor allem das mit der datalist. wofür benutzt man das?

LionIV · 29. Dez. 2016

ich versuche es mal verständlich zu erklären, was ich möchte.

In obige Datalist lese ich per XMLHttpRequest und nachfolgendem Code eine Nummer und eine Bezeichnung in die Datalist ein.

Code:

  <script>
function holeBezeichnungen(Item) {
     // clear des Dropdownfeldes
    document.getElementById("pos").innerHTML = "";
     var data =Item.split(',');  
    var list = document.getElementById("pos"); 
 
     for (var i = 0, len = data.length; i < len ; i++) {
         list.appendChild(new Option(data[i], data[i]));
     }
    
  
}

damit ist die Datalist wie folgt gefüllt.

001 Milch
002 Brot
003 Kaffee
usw usw

in das zugehörige Textfeld wird beim Klick auf einen Eintrag z.B. "002 Brot" übernommen.
Hier möchte ich aber nur 002 übernehmen.
Als zweite Variante könnte man auch beim überfahren des Textfeldes mit der Maus die Bezeichnung "Brot" in einem separaten Feld anzeigen.
Die dritte Variante wäre, die datalist breiter als das zugehörige Textfeld anzuzeigen, damit der Text auch ganz im dropdown angezeigt wird.

Ich hoffe das ist jetzt verständlich.

Ich danke euch

andreax · 29. Dez. 2016

Die Datalist breiter anzeigen ist mir nicht klar ?
Aber das Inputfeld weiter machen geht auf alle Fälle einfach mit css.

HTML:

<!DOCTYPE html>

<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="description" content=""/>
		<meta name="keywords" content=""/>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title></title>
		
<style>
#zeigsmir {width:300px; height:20px; }
</style>
</head>
<body>

<input id="zeigsmir" type="text" list="tolong" placeholder="ich bin ein gaaaaanz breiterText" >

<datalist id="tolong">
<option>001 x---------x</option>
<option>002 x---------x</option>
<option>003 x---------x</option>
<option>004 x---------x</option>
<option>005 x---------x</option>
</datalist>
</body>
</head>

LionIV · 29. Dez. 2016

was ist daran unverständlich?

- - - Aktualisiert - - -

danke dir, das ist mir klar,
ich möchte aber die datalist breiter als das zuugehörende textfeld

andreax · 29. Dez. 2016

Die Datalist selbst wird ja nicht angezeigt so wie zb ein Select

- - - Aktualisiert - - -

ok jetzt wirds langsam klarer.

das ist nicht so leicht ohne Trick umzusetzen weil das vermute ich mal alles intern vom Browser geregelt wird.

HTML:

<!DOCTYPE html>

<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="description" content=""/>
		<meta name="keywords" content=""/>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title></title>
		
<style>
		#zeigsmir{width:200px;height:20px; overflow:visible;border:none; text-align:left;}
              /*  #zeigsmir{ text-align:right; float:right;}  */  
		#soi{width:80px;overflow:hidden;border:1px solid #999;}
</style>
</head>
<body>

<p id="soi"><input id="zeigsmir" type="text" list="tolong" placeholder="NR" ></p>

<datalist id="tolong">
<option>001 x---------x</option>
<option>002 x---------x</option>
<option>003 x---------x</option>
<option>004 x---------x</option>
<option>005 x---------x</option>
</datalist>
</body>
</head>

zirzofer · 29. Dez. 2016

schau mal hier: javascript - Perform action when clicking HTML5 datalist option - Stack Overflow

andreax · 31. Dez. 2016

@LionIV
Wenn du die Zahlen als value einträgst und den Textcontent ins Tag schreibst wird es so dargestellt
das die Breite der Datalist die des input überragt.
um den Text zu splitten solltest du beim Speichern wenn geht einen Trenner setzen
zb ein Bindestrich also 001-Brot usw.

HTML:

<input id="zeigsmir" type="text" list="tolong" placeholder="NR" style="width:50px;height:20px;" >
<datalist id="tolong">
<option value="001" >xxxxxxxx1-xxxxxxxxx-xxxxxxxxx-xxxxxxxxx-xxxxxxxxx-xxxxxx</option>
<option value="002"> xxxxxxxx2-xxxxxxxxx-xxxxxxxxx-xxxxxxxxx-xxxxxxxxx-xxxxxx</option>
<option value="003"> xxxxxxxx3-xxxxxxxxx-xxxxxxxxx-xxxxxxxxx-xxxxxxxxx-xxxxxx</option>
<option value="004"> xxxxxxxx4-xxxxxxxxx-xxxxxxxxx-xxxxxxxxx-xxxxxxxxx-xxxxxx</option>
<option value="005"> xxxxxxxx5-xxxxxxxxx-xxxxxxxxx-xxxxxxxxx-xxxxxxxxx-xxxxxx</option>
</datalist>


 <script>
function holeBezeichnungen(Item) {
     // clear des Dropdownfeldes
    document.getElementById("pos").innerHTML = "";
     var data =Item.split(',');  
    var list = document.getElementById("pos"); 
 
     for (var i = 0, len = data.length; i < len ; i++) {
//// hier splitten /////////////////////////////////
        var datasp =  data[i].split('-');
////////////////////////////////////////////////////////
         list.appendChild(new Option(datasp[0], datasp[1]));
     }
    
  
}</script

@mikdoe
Kannst du meine beiden vorherigen Posts löschen? Weil die verwirren bloß und sind nicht von großem Nutzen

wenn nicht is auch kein Problem

Datalist Datenübernahme ins Textfeld

LionIV

New member

zirzofer

Guest

LionIV

New member

zirzofer

Guest

mikdoe

Moderator

LionIV

New member

andreax

Guest

LionIV

New member

andreax

Guest

zirzofer

Guest

andreax

Guest