Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
Search an option inside a dataList
Different methods to check if an option is inside a dataList
Go to the benchmark
Embed
Embed Benchmark Result
Run details:
User agent:
Mozilla/5.0 (Android 10; Mobile; rv:133.0) Gecko/133.0 Firefox/133.0
Browser:
Firefox Mobile 133
Operating system:
Android
Device Platform:
Mobile
Date tested:
one year ago
Test name
Executions per second
Using each (jQuery)
113594.3 Ops/sec
Using find (jQuery)
59876.5 Ops/sec
Search inside an Array of Strings (Vanilla JS)
3337428.5 Ops/sec
Search inside a HashMap of Strings (Vanilla JS)
4918308.5 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);