Run results for: Search an option inside a dataList

Run details:

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 12_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.1 Mobile/15E148 Safari/604.1

Browser: Mobile Safari 12

Operating system: iOS 12.3.1

Device Platform: Mobile

Date tested: 4 years ago

Test name	Executions per second
Using each (jQuery)	360794.2 Ops/sec
Using find (jQuery)	175053.3 Ops/sec
Search inside an Array of Strings (Vanilla JS)	1646120.0 Ops/sec
Search inside a HashMap of Strings (Vanilla JS)	1569224.0 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)