Input type="text" with select functionality after clicking on Input type="text"

Question

I have this piece of code: input type="text" name="email" id="email" value="" placeholder="" class="txt"

This is a simple input.

What I need. Click on this input type="text" -> a drop-down select menu with several options appears (but it is still possible to write something manually into this input type="text") -> click on any option -> one of the options is inserted into the input type="text" -> click again on the input type="text" -> the same drop-down select menu with several options appears.

Please help to do this.

Answer 1

This can't be done with the standard form controls alone, but you can make your own. See the comments below for explanation.

// Get references to elements used
var input = document.getElementById("selectedBrowser");
var list = document.getElementById("list");

// Get all the list items into an array
var listItems = Array.prototype.slice.call(document.querySelectorAll("#list > div"));

// Make the "drop down" list the same width as the input
list.style.width = getComputedStyle(input).width;

// Set up click handler on the input
input.addEventListener("click", function(){ 
 list.classList.remove("hidden");  // Show the list
});

// Set up input event handler on input
input.addEventListener("input", function(){ 
 list.classList.add("hidden");  // Hide the list
});


// Loop over the list items
listItems.forEach(function(item){
  // Set up a click event handler
  item.addEventListener("click", function(){
    input.value = item.textContent;    // Copy the value into the input
   list.classList.add("hidden");       // Hide the list
  });

  // Set up a mouseover event handler
  item.addEventListener("mouseover", function(){
    item.classList.add("highlight");       // Hide the list
  });
  
  // Set up a mouseout event handler  
  item.addEventListener("mouseout", function(){
    item.classList.remove("highlight");       // Hide the list
  });
});

/* Applied to the drop down list by default to hide it and
   removed when the list needs to be shown. */
.hidden {
 display:none;
}

#container {
  display:inline-block;
  vertical-align:top;
}

/* Ensures that the input will be positioned at the top-left of its parent */
#selectedBrowser {
  position:absolute;
}

#list {
  position:absolute; /* Position at top-left of parent */
  top:1.85em;  /* But, then move down to be below the input */
  border:1px solid #e0e0e0; 
  height:5em;  /* Limit height of list */
  overflow-y:scroll; /* Add vertical scroll bar when list won't fit in height */
}

#list > div {
  cursor:pointer;
  user-select:none;
  margin:2px 0;
}

.highlight {
  background-color:rgba(255, 255, 0, .5);
}

<label for="selectedBrowser">Choose a browser from this list:</label>
<div id="container">
  <input id="selectedBrowser" name="browser">
  <div id="list" class="hidden">
    <div>Chrome</div>
    <div>Firefox</div>
    <div>Internet Explorer</div>
    <div>Opera</div>
    <div>Safari</div>
    <div>Microsoft Edge</div>
  </div>
</div>

Answer 2

HTML5 has a built-in input and a datalist that renders as a combo box. You add a list attribute to the input that matches the value of the id in the datalist. An example is shown below.

<input type="text" list="items" />
<datalist id="items">
  <option>Item1</option>
  <option>Item2</option>
  <option>Item3</option>
  <option>Item4</option>
</datalist>

An issue with this solution is that it is not supported by the Apple Safari browser. W3Schools has the latest compatibility info.

If compatibility is an issue, a number of jQuery or javascript solutions are out there that may solve the problem. Here is a link to a Javascript solution that may work for you.