Benchmark: Search an option inside a dataList

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);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using each (jQuery)
Using find (jQuery)
Search inside an Array of Strings (Vanilla JS)
Search inside a HashMap of Strings (Vanilla JS)

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one month ago)

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/OS: Chrome 122 on Windows

View result in a separate tab

Test name	Executions per second
Using each (jQuery)	80386.8 Ops/sec
Using find (jQuery)	51141.2 Ops/sec
Search inside an Array of Strings (Vanilla JS)	1036566.0 Ops/sec
Search inside a HashMap of Strings (Vanilla JS)	1206065.0 Ops/sec

Search an option inside a dataList (version: 0)

Different methods to check if an option is inside a dataList

Comparing performance of: Using each (jQuery) vs Using find (jQuery) vs Search inside an Array of Strings (Vanilla JS) vs Search inside a HashMap of Strings (Vanilla JS)

Created: 5 years ago by: Registered User

Jump to the latest result

Using each (jQuery)

Using find (jQuery)

Search inside an Array of Strings (Vanilla JS)

Search inside a HashMap of Strings (Vanilla JS)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A