[Solved] Input type=”text” with select functionality after clicking on Input type=”text”

by


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>

13

solved Input type=”text” with select functionality after clicking on Input type=”text”