0

I want to get the value from the datalist and display it in the textarea.
Therefor i used the script "selectProgram".
But why is there an additional input textfield when i use the select tags?
When i remove "select" the input field dissapears.
I just want the datalist appearing with the values inside.

<!DOCTYPE HTML><html>
  <head>    
  </head>
  <body>
  <strong>Programm:</strong><br>
  <textarea autofocus required name="text" id="text" rows="9" cols="23"></textarea>
  <br>
  <br>
<input type="text" list="programList">
<select datalist id="programList" onchange="selectProgram()">
    <option value="432,325,511">Kopfweh</option>
    <option value="1000,45,1">Halsschmerzen</option>
    <option value="54,61,10">Grippe</option>
    <option value="20,30,50">Asthma</option>
    <option value="65,663,123">Entgiftung</option>
</datalist>
</select>
  
 <script>
function selectProgram() {
  var programList = document.getElementById("programList");
  document.getElementById("text").value = programList.options[programList.selectedIndex].value;
}
</script>
  </body>
</html>
Progman
  • 16,827
  • 6
  • 33
  • 48
Daniel
  • 75
  • 1
  • 7

2 Answers2

1

Option tags can be in select tags OR datalist tags. Therefor you don't need both. When you take the datalist you can grab the wanted value directly from the input.

Working example:

function selectProgram() {
  document.getElementById("text").value = document.getElementById("list_input").value;
}
<strong>Programm:</strong><br>
<textarea autofocus required name="text" id="text" rows="9" cols="23"></textarea>
<br>
<br>
<input type="text" id="list_input" list="programList" onchange="selectProgram()">
<datalist id="programList">
    <option value="432,325,511">Kopfweh</option>
    <option value="1000,45,1">Halsschmerzen</option>
    <option value="54,61,10">Grippe</option>
    <option value="20,30,50">Asthma</option>
    <option value="65,663,123">Entgiftung</option>
</datalist>

If you only want to see the option descriptions and the numerical values to be hidden you can save them as data attributes. You can grab these with the ordinary value as selector.

Working example:

function selectProgram() {
  var input_value = document.getElementById("list_input").value;
  var selected_option = document.querySelector('option[value=' + input_value + ']');
  document.getElementById("text").value = selected_option.dataset.value;
}
<strong>Programm:</strong><br>
<textarea autofocus required name="text" id="text" rows="9" cols="23"></textarea>
<br>
<br>
<input type="text" id="list_input" list="programList" onchange="selectProgram()">
<datalist id="programList">
  <option data-value="432,325,511" value="Kopfweh">
  <option data-value="1000,45,1" value="Halsschmerzen">
  <option data-value="54,61,10" value="Grippe">
  <option data-value="20,30,50" value="Asthma">
  <option data-value="65,663,123" value="Entgiftung">
</datalist>

You can reset the input with onclick and a second function, that sets the value of the input to an empty string: document.getElementById("list_input").value = ''; If you wants to reset the textarea too then reset their value also in the second function: document.getElementById("text").value = '';

function selectProgram() {
  var input_value = document.getElementById("list_input").value;
  var selected_option = document.querySelector('option[value=' + input_value + ']');
  document.getElementById("text").value = selected_option.dataset.value;
}

function resetInput() {
  document.getElementById("list_input").value = '';
  document.getElementById("text").value = '';
}
<strong>Programm:</strong><br>
<textarea autofocus required name="text" id="text" rows="9" cols="23"></textarea>
<br>
<br>
<input type="text" id="list_input" list="programList" onchange="selectProgram()" onclick="resetInput()">
<datalist id="programList">
  <option data-value="432,325,511" value="Kopfweh">
  <option data-value="1000,45,1" value="Halsschmerzen">
  <option data-value="54,61,10" value="Grippe">
  <option data-value="20,30,50" value="Asthma">
  <option data-value="65,663,123" value="Entgiftung">
</datalist>

Furthermore you can place the event listeners onchange and onclick directly in the script. In that case you can easily add even more listeners like keyup for example to catch the Escape key.

Working example:

var list_input = document.getElementById("list_input");

function selectProgram() {
  var selected_option = document.querySelector('option[value=' + list_input.value + ']');
  document.getElementById("text").value = selected_option.dataset.value;
}

function resetInput() {
  list_input.value = '';
  document.getElementById("text").value = '';
}

list_input.addEventListener('change', selectProgram);

list_input.addEventListener('click', resetInput);

list_input.addEventListener('keyup', function(e) {
  if (e.key == 'Escape') {
    resetInput();
  }
});
<strong>Programm:</strong><br>
<textarea autofocus required name="text" id="text" rows="9" cols="23"></textarea>
<br>
<br>
<input type="text" id="list_input" list="programList">
<datalist id="programList">
  <option data-value="432,325,511" value="Kopfweh">
  <option data-value="1000,45,1" value="Halsschmerzen">
  <option data-value="54,61,10" value="Grippe">
  <option data-value="20,30,50" value="Asthma">
  <option data-value="65,663,123" value="Entgiftung">
</datalist>
biberman
  • 5,606
  • 4
  • 11
  • 35
  • Thanks for the answer but i want to use the input field also as a search bar. In your example we just have the input field with the items you can select. But you can not type into an input field and search for example "Asthma" – Daniel Apr 22 '21 at 18:31
  • Added a second example with hidden numerical data for the case that you only want the option descriptions to be visible... – biberman Apr 22 '21 at 19:02
  • If that answers your question you should mark it as accepted (see https://stackoverflow.com/help/someone-answers). – biberman Apr 24 '21 at 09:38
  • Thanks that works now perfectly fine as i wanted. Now there is just one thing that bugs me. When an item in the list is selected and i want to choose another list item, i first need to delete all text in the search bar before all list-items come back visible. Is there a way when i click the datalist, that it first deletes any selected item in the search bar? – Daniel Apr 24 '21 at 20:31
  • Yes, i updated my answer. I also added another example without the inline javascript in the input tag but with an additional event listener for "Escape" and with textarea reset... – biberman Apr 24 '21 at 22:29
  • Wow that looks amazing. Thanks so much! If i click the little arrow in the listbox it shows all listbox-items. But if i click just in the input textfield it deletes the text but the listbox-items are not shown. Can you somehow refresh it so it shows all listbox items? – Daniel Apr 25 '21 at 00:40
  • You have to click the arrow button or a second time if you clicked on the text (see [SO question from last year](https://stackoverflow.com/questions/61994097/clear-a-input-value-and-also-reset-the-datalist-option-dropdown-when-clicked)). But why did you remove the "accepted" mark? Isn't your question for the textarea data injection answered anymore? – biberman Apr 25 '21 at 08:08
1

I want it exactly like this example just that the values are copied to the textarea with the script.
Because with this example you can use the input field as a seach bar :)

<!DOCTYPE HTML><html>
  <head>    
  </head>
  <body>
  <strong>Programm:</strong><br>
  <textarea autofocus required name="text" id="text" rows="9" cols="23"></textarea>
  <br>
  <br>
<input list="programList">

<datalist id="programList" onchange="selectProgram()">
    <option value="432,325,511">Kopfweh</option>
    <option value="1000,45,1">Halsschmerzen</option>
    <option value="54,61,10">Grippe</option>
    <option value="20,30,50">Asthma</option>
    <option value="65,663,123">Entgiftung</option>
</datalist>
      
 <script>
function selectProgram() {
  var programList = document.getElementById("programList");
  document.getElementById("text").value = programList.options[programList.selectedIndex].value;
}
</script>
  </body>
</html>
Daniel
  • 75
  • 1
  • 7