How to limit datalist options without losing options "value=" functionality?

Question

Using a unique solution from @Olli here at Limit total entries displayed by datalist I'm able to limit the number of suggestions offered by a datalist.

The problem: that solution only allows for searching the option innerHTML. It doesn't allow for simultaneously searching the datalist option value= even though datalist is capable of doing that by default.

For example (see example below), if I type input California, datalist doesn't return the California result, but if I input CA or CA-US then datalist returns the intended California result.

What changes do I need to make to the Javscript code in order to include the option innerHTML functionality?

var search = document.querySelector('#search');
var results = document.querySelector('#searchresults');
var templateContent = document.querySelector('#resultstemplate').content;
search.addEventListener('keyup', function handler(event) {
    while (results.children.length) results.removeChild(results.firstChild);
    var inputVal = new RegExp(search.value.trim(), 'i');
    var clonedOptions = templateContent.cloneNode(true);
    var set = Array.prototype.reduce.call(clonedOptions.children, function searchFilter(frag, el) {
        if (inputVal.test(el.textContent) && frag.children.length < 5) frag.appendChild(el);
        return frag;
    }, document.createDocumentFragment());
    results.appendChild(set);
});
    
var n = document.getElementById("search");
n.addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
    }
});

<template id="resultstemplate">
<option value="Alabama">AL-US</option>
<option value="California">CA-US</option>
<option value="Michigan">MI-US</option>
<option value="Texas">TX-US</option>
<option value="Wisconsin">WI-US</option>
</template>
<input type="text" name="search" id="search"  placeholder="type state name or code" list="searchresults" autocomplete="off" />
<datalist id="searchresults"></datalist>

<button id="myButton" type="button"
onclick="loadDoc('state_data.xml', myFunction)">Submit
</button>

dedman · Accepted Answer · 2018-07-08T05:09:31.957

Just using (inputVal.test(el.textContent) || inputVal.test(el.value) in place of inputVal.test(el.textContent) will give you the desired result. Here we search for both value as well as innerHTML and accept it if any one of them matches the input text :)

Update: This will result in the dropdown sticking there even if user chooses an item from it, this happens because even after choosing an item the value of input box matches with dropdown values for ex. California will match with California and it will show in dropdown.

To solve this we have to add another condition to if statement, (search.value != el.value) this will make sure that if input value becomes exactly equal to dropdown value, that dropdown value will be ignored. Checkout the updated snippet below...

var search = document.querySelector('#search');
var results = document.querySelector('#searchresults');
var templateContent = document.querySelector('#resultstemplate').content;
search.addEventListener('keyup', function handler(event) {
    while (results.children.length) results.removeChild(results.firstChild);
    var inputVal = new RegExp(search.value.trim(), 'i');
    var clonedOptions = templateContent.cloneNode(true);
    var set = Array.prototype.reduce.call(clonedOptions.children, function searchFilter(frag, el) {
        if ((inputVal.test(el.textContent) || inputVal.test(el.value)) && (search.value != el.value) && frag.children.length < 5) frag.appendChild(el);
        return frag;
    }, document.createDocumentFragment());
    results.appendChild(set);
});
    
var n = document.getElementById("search");
n.addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
    }
});

<template id="resultstemplate">
<option value="Alabama">AL-US</option>
<option value="California">CA-US</option>
<option value="Michigan">MI-US</option>
<option value="Texas">TX-US</option>
<option value="Wisconsin">WI-US</option>
</template>
<input type="text" name="search" id="search"  placeholder="type state name or code" list="searchresults" autocomplete="off" />
<datalist id="searchresults"></datalist>

<button id="myButton" type="button"
onclick="loadDoc('state_data.xml', myFunction)">Submit
</button>

Thanks for your code edit. I see the logic, however for some reason the dropdown gets stuck and won't go away unless I press submit. I'm not seeing how your code might have altered the dropdown behavior. — logoologist, Jul 07 '18 at 21:30
what do you mean by "dropdown won't go away" ? I am not getting what are you trying to say... — dedman, Jul 08 '18 at 04:36
Ohh got it! My mistake I didn't see it before, I have updated my answer please check it out... — dedman, Jul 08 '18 at 05:10

How to limit datalist options without losing options "value=" functionality?

1 Answers1