如何找到数据列表模板选项 innerHTML 值？

Question

我想知道如何限制 datalist 下拉列表中显示的 datalist options 的数量。

我发现 this solution 使用 datalist 环绕 template，加上一些 javascript.

但是，我想要 return innerHTML 对应 selected datalist option。所以，如果我 select option value = "California" 我想 return >"CA"<.

document.getElementById("optionInnerHTML").innerHTML = [].find.call(document.getElementById('searchresults').getElementsByTagName('option'), ({ value }) => value === a).innerHTML;

我已经尝试将 document.getElementById('resultstemplate') 添加到上面的代码中，但是没有任何效果。我需要更改什么才能使函数 return 成为 option innerHTML 值？

Before 添加 datalist options 限制（请注意，显示的下拉选项尚未限制，但我成功获得了 option innerHTML 值：

/* listen for ENTER click to submit datalist option input */  
function loadDoc() {
var n = document.getElementById("search");
n.addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
}
});
    
/* find search value */  
var n = document.getElementById("search");
var a = n.value;
document.getElementById("searchValue").innerHTML = a;
    
/* find datalist option innerHTML */  
document.getElementById("optionInnerHTML").innerHTML = [].find.call(document.getElementById('searchresults').getElementsByTagName('option'), ({ value }) => value === a).innerHTML;
}

<datalist id="searchresults">
<option value="Alabama">AL</option>
<option value="California">CA</option>
<option value="Florida">FL</option>
<option value="Michigan">MI</option>
<option value="New York">NY</option>
<option value="Wisconsin">WI</option>
</datalist>
    
<input type="text" name="search" id="search"  placeholder="type state name or code" list="searchresults" autocomplete="off" />

<button id="myButton" type="button"
onclick="loadDoc()">Submit
</button>

<p>search value: <span id="searchValue"></span></p>
<p>datalist option innerHTML: <span id="optionInnerHTML"></span></p>

After 添加 <template> 和 datalist options 限制（注意显示的 options 现在在输入期间是如何受到限制的，但是在提交时我不再获得 option innerHTML 值）：

/* Limit length of datalist options dropdown */
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);
});


/* listen for ENTER click to submit datalist option input */  
function loadDoc() {
var n = document.getElementById("search");
n.addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
}
});
    
/* find search value */  
var n = document.getElementById("search");
var a = n.value;
document.getElementById("searchValue").innerHTML = a;
    
/* find datalist option innerHTML */  
document.getElementById("optionInnerHTML").innerHTML = [].find.call(document.getElementById('searchresults').getElementsByTagName('option'), ({ value }) => value === a);
}

<datalist id="searchresults">
<template id="resultstemplate">
<option value="Alabama">AL</option>
<option value="California">CA</option>
<option value="Florida">FL</option>
<option value="Michigan">MI</option>
<option value="New York">NY</option>
<option value="Wisconsin">WI</option>
</template>
</datalist>
    
<input type="text" name="search" id="search"  placeholder="type state name or code" list="searchresults" autocomplete="off" />

<button id="myButton" type="button"
onclick="loadDoc()">Submit
</button>

<p>search value: <span id="searchValue"></span></p>
<p>datalist option innerHTML: <span id="optionInnerHTML"></span></p>

Answer 1

由于您已经保存了模板，您可以使用它来搜索匹配的选项：

const options = templateContent.querySelectorAll('option');
const matchingOption = [].find.call(options, ({ value }) => value === a);
document.getElementById("optionInnerHTML").innerHTML = matchingOption.innerHTML;

完整的工作示例：

/* Limit length of datalist options dropdown */
var search = document.querySelector('#search');
var results = document.querySelector('#searchresults');
var templateContent = document.querySelector('#resultstemplate').content;
search.addEventListener('keyup', function handler(event) {
    if (event.keyCode === 13) {
      return;
    }

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


/* listen for ENTER click to submit datalist option input */  
function loadDoc() {
var n = document.getElementById("search");
n.addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
}
});
    
/* find search value */  
var n = document.getElementById("search");
var a = n.value;
document.getElementById("searchValue").innerHTML = a;
    
/* find datalist option innerHTML */  
const matchingOption = [].find.call(templateContent.querySelectorAll('option'), ({ value }) => value === a);
document.getElementById("optionInnerHTML").innerHTML = matchingOption.innerHTML;
}

<datalist id="searchresults">
<template id="resultstemplate">
<option value="Alabama">AL</option>
<option value="California">CA</option>
<option value="Florida">FL</option>
<option value="Michigan">MI</option>
<option value="New York">NY</option>
<option value="Wisconsin">WI</option>
</template>
</datalist>
    
<input type="text" name="search" id="search"  placeholder="type state name or code" list="searchresults" autocomplete="off" />

<button id="myButton" type="button"
onclick="loadDoc()">Submit
</button>

<p>search value: <span id="searchValue"></span></p>
<p>datalist option innerHTML: <span id="optionInnerHTML"></span></p>

如何找到数据列表模板选项 innerHTML 值？

How to find datalist template options innerHTML value?

javascript

html

html-datalist

html-templates