Как найти параметры шаблона списка данных в значении innerHTML?

Я хотел знать, как ограничить количество datalist options отображается на datalist падать.

Я нашел это решение, которое использует datalist оборачивая вокруг template, плюс немного JavaScript.

Но я хочу вернуть innerHTML соответствует выбранному datalist option, Итак, если я выберу option value = "California" я хочу вернуться >"CA"<,

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

Я пытался добавить document.getElementById('resultstemplate') к приведенному выше коду, однако ничего не сработало. Что мне нужно изменить, чтобы функция возвращала option innerHTML значение?

Перед добавлением 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>

После добавления <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>

Источник

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>

Источник
Другие вопросы по тегам