0
145
ViewsHow to search inside the input label
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 !
·
Juan Pablo Isaza
2 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
0
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>
·
Juan Pablo Isaza
Report
Answer question