How to search inside the input label

Question

I want to search for items inside a select box. what I need is to type the keywords to search inside the input label and the item that match my search gets selected on the fly.

It would be something like this:

This is my code:

var arrayOfColors = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', 
          '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
          '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A', 
          '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
          '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC', 
          '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
          '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680', 
          '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
          '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3', 
          '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];

var select = document.getElementById("color");
for(index in arrayOfColors) {
    select.options[select.options.length] = new Option(arrayOfColors[index], index);
}

<div class="mb-3">
    <label class="form-label">Color</label>
    <select class="form-select" id="color">
     <option>     Type the search here     </option>
    </select>
</div>

Any ideas ? thank you !

you are probably looking for https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist ? — G-Cyrillus, Sep 16 '21 at 11:42

score 2 · Answer 1 · answered Sep 16 '21 at 11:42

We can search option by keywords in input using jQuery UI.

Code snippet :

  $( function() {
    var arrayOfColors = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', 
          '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
          '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A', 
          '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
          '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC', 
          '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
          '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680', 
          '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
          '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3', 
          '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'];
    $( "#color" ).autocomplete({
      source: arrayOfColors
    });
  } );

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
<div class="mb-3">
    <label class="form-label">Color</label>
    <input id="color" placeholder="Type the search here">
</div>

G-Cyrillus · Accepted Answer · 2021-09-16T13:55:05.333

example from my comment using a datalist form element:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

The <datalist> HTML element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.

Demo:

var arrayOfColors = ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
  '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
  '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A',
  '#FF99E6', '#CCFF1A', '#FF1A66', '#E6331A', '#33FFCC',
  '#66994D', '#B366CC', '#4D8000', '#B33300', '#CC80CC',
  '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399',
  '#E666B3', '#33991A', '#CC9999', '#B3B31A', '#00E680',
  '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933',
  '#FF3380', '#CCCC00', '#66E64D', '#4D80CC', '#9900B3',
  '#E64D66', '#4DB380', '#FF4D4D', '#99E6E6', '#6666FF'
];

let datalist = document.querySelector("#color");
for (i = 0; i < arrayOfColors.length; i++) {
  let opt = document.createElement("option");
  opt.setAttribute("value", arrayOfColors[i]);
  datalist.appendChild(opt)
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="mb-3">
  <label class="form-label" for="iptcolor" >Color</label>
  <input class="form-select" list="color" placeholder="type your search here" id="iptcolor" />
  <datalist id="color"></datalist>
</div>

If using `datalist`, some points to consider: https://stackoverflow.com/a/21836157/4378314. Anyhow, on first glance, in Firefox, to view the popup list seems to require an extra click, or maybe this is unavoidable? — Kalnode, Sep 16 '21 at 12:21
@MarsAndBack no idea what is supposed to be the approach , to me not showing at first glance the whole list , but letting you typing is not bothering me, untill nothing you type can match the list , that is not showing then the list in any browser is bothering me ;) — G-Cyrillus, Sep 16 '21 at 13:59

How to search inside the input label

2 Answers2