Run results for: Search an option inside a dataList

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Browser: Chrome 122

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

Search inside a HashMap of Strings (Vanilla JS)

1.2M/s

Search inside an Array of Strings (Vanilla JS)

1.0M/s

Using each (jQuery)

80K/s

Using find (jQuery)

51K/s

View exact numbers

Test name	Executions per second
✓ Search inside a HashMap of Strings (Vanilla JS)	1,206,065 Ops/sec
Search inside an Array of Strings (Vanilla JS)	1,036,566 Ops/sec
Using each (jQuery)	80,387 Ops/sec
Using find (jQuery)	51,141 Ops/sec

HTML Preparation code:

<datalist id="colours">
    <option value="Red" data-id="1">
    <option value="Blue" data-id="2">
    <option value="Green" data-id="3">
    <option value="Black" data-id="4">
    <option value="White" data-id="5">
</datalist>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

Script Preparation code:

var rightSelection = "White";
var wrongSelection = "Greeny";
var options = document.getElementById("colours").options;
var $options = $("#colours");
var array = Array.prototype.map.call(options, function (option) {
  return option.value;
});
var hashmap = Array.prototype.reduce.call(options, function (obj, option) {
    if (!obj[option.value]) { obj[option.value] = true; }
    return obj;
}, {});

Tests:

Using each (jQuery)
function findColour (color) { var finded = false; $options.find("option").each(function() { if (this.value === color) { finded = true; return false; } }); return finded; } findColour(rightSelection); findColour(wrongSelection);
Using find (jQuery)
function findColour (color) { return $options.find("option[value='" + color + "']").length; } findColour(rightSelection); findColour(wrongSelection);
Search inside an Array of Strings (Vanilla JS)
function findColour (color) { return array.indexOf(color) >= 0; } findColour(rightSelection); findColour(wrongSelection);
Search inside a HashMap of Strings (Vanilla JS)
function findColour (color) { return hashmap[color]; } findColour(rightSelection); findColour(wrongSelection);

Run results for: Search an option inside a dataList

Different methods to check if an option is inside a dataList

Using each (jQuery)

Using find (jQuery)

Search inside an Array of Strings (Vanilla JS)

Search inside a HashMap of Strings (Vanilla JS)