用 onclick-event 替换搜索字段中的输入不会更新列表

Question

我有一个搜索字段可以过滤三个不同的列表。我想要一个onclick将文本添加到搜索字段并替换可能存在的任何其他值的事件。

我可以这样做，但onclick不会更新列表，除非我单击搜索字段并手动按 Enter 键。添加click()事件没有帮助。

同时，点击X搜索字段中的 来清除输入也不会更新列表。

我能做些什么？

<p onclick="document.getElementById('searchCombo').value = 'element 1'; document.getElementById('searchCombo').click()">Filter for: vitamins</p>

<p onclick="document.getElementById('searchCombo').value = 'element 2'; document.getElementById('searchCombo').click()">Filter for: drugs</p>

<p onclick="document.getElementById('searchCombo').value = 'element 3'; document.getElementById('searchCombo').click()">Filter for: medications</p>

<input type="search" id="searchCombo" placeholder="Search for combination...">

<ul ID="list1" class="combo">

    <li><a href="#">List 1 element 1</a></li>

    <li><a href="#">List 1 element 2</a></li>

    <li><a href="#">List 1 element 3</a></li>

    <li class="none">Nothing found in this category</li>

</ul>

<ul ID="list2" class="combo">

    <li><a href="#">List 2 element 1</a></li>

    <li><a href="#">List 2 element 2</a></li>

    <li><a href="#">List 2 element 3</a></li>

    <li class="none">Nothing found in this category</li>

</ul>

<ul ID="list3" class="combo">

    <li><a href="#">List 3 element 1</a></li>

    <li><a href="#">List 3 element 2</a></li>

    <li><a href="#">List 3 element 3</a></li>

    <li class="none">Nothing found in this category</li>

</ul>

这是 JavaScript：

<script>

    /* drug combo search */

    const select_all = (selector, selectee = document) =>

        Array.from(selectee.querySelectorAll(selector));

    const hide_item = item => item.style.display = 'none';

    const show_item = item => item.style.display = '';

    const item_text = item => item.textContent.toLowerCase();

    const compare = text => item => item_text(item).includes(text);

    const has_class = class_name => item => item.className.includes(class_name);

    const not_has_class = class_name => item => !has_class(class_name)(item);

    };

</script>

Answer 1

如果您对 HTML 有一定的灵活性，我的建议是：我认为如果您不需要 a 标签，只要将 aclass="filter_to" data-filter_to_term="element 1"标签移至 p 标签即可。const select_all = (selector, selectee = document) =>&nbsp; Array.from(selectee.querySelectorAll(selector));const hide_item = item => item.style.display = 'none';const show_item = item => item.style.display = '';const item_text = item => item.textContent.toLowerCase();const compare = text => item => item_text(item).includes(text);const has_class = class_name => item => item.className.includes(class_name);const not_has_class = class_name => item => !has_class(class_name)(item);const filter_list = text => list => {&nbsp; let lis = select_all("li", list);&nbsp; let to_show = lis&nbsp; &nbsp; .filter(not_has_class('none'))&nbsp; &nbsp; .filter(compare(text));&nbsp; if (to_show.length === 0)&nbsp; &nbsp; to_show = lis.filter(has_class('none'));&nbsp; lis.forEach(hide_item);&nbsp; to_show.forEach(show_item);};const search_box = document.getElementById('searchCombo');const filter = (text) =>&nbsp; select_all(".combo").forEach(&nbsp; &nbsp; filter_list((text || '').toLowerCase())&nbsp; );const set_filter = (text) => {&nbsp; search_box.value = text;&nbsp; filter(text);};const onclick_filter_to = (event) => {&nbsp; event.preventDefault();&nbsp; set_filter(event.target.dataset.filter_to_term);};select_all(".filter_to").forEach(&nbsp; (element) => element.addEventListener("click", onclick_filter_to));search_box.addEventListener("input", event => filter(event.target.value));filter();<p><a href="#" class="filter_to" data-filter_to_term="element 1">Filter for: vitamins</a></p><p><a href="#" class="filter_to" data-filter_to_term="element 2">Filter for: drugs</a></p><p><a href="#" class="filter_to" data-filter_to_term="element 3">Filter for: medications</a></p><input type="search" id="searchCombo" placeholder="Search for combination..."><ul ID="list1" class="combo">&nbsp; &nbsp; <li><a href="#">List 1 element 1</a></li>&nbsp; &nbsp; <li><a href="#">List 1 element 2</a></li>&nbsp; &nbsp; <li><a href="#">List 1 element 3</a></li>&nbsp; &nbsp; <li class="none">Nothing found in this category</li></ul><ul ID="list2" class="combo">&nbsp; &nbsp; <li><a href="#">List 2 element 1</a></li>&nbsp; &nbsp; <li><a href="#">List 2 element 2</a></li>&nbsp; &nbsp; <li><a href="#">List 2 element 3</a></li>&nbsp; &nbsp; <li class="none">Nothing found in this category</li></ul><ul ID="list3" class="combo">&nbsp; &nbsp; <li><a href="#">List 3 element 1</a></li>&nbsp; &nbsp; <li><a href="#">List 3 element 2</a></li>&nbsp; &nbsp; <li><a href="#">List 3 element 3</a></li>&nbsp; &nbsp; <li class="none">Nothing found in this category</li></ul>看起来用 input 替换 keyup 可能适用于 Chrome 中的取消 X 按钮（但我以前没有使用过）。

Answer 2

这是工作演示Jsbin 工作演示超文本标记语言<p id="filter1">Filter for: vitamins</p><p id="filter2">Filter for: drugs</p><p id="filter3">Filter for: medications</p><input type="search" id="searchCombo" placeholder="Search for combination..."><ul ID="list1" class="combo">&nbsp; &nbsp; <li><a href="#">List 1 element 1</a></li>&nbsp; &nbsp; <li><a href="#">List 1 element 2</a></li>&nbsp; &nbsp; <li><a href="#">List 1 element 3</a></li>&nbsp; &nbsp; <li class="none">Nothing found in this category</li></ul><ul ID="list2" class="combo">&nbsp; &nbsp; <li><a href="#">List 2 element 1</a></li>&nbsp; &nbsp; <li><a href="#">List 2 element 2</a></li>&nbsp; &nbsp; <li><a href="#">List 2 element 3</a></li>&nbsp; &nbsp; <li class="none">Nothing found in this category</li></ul><ul ID="list3" class="combo">&nbsp; &nbsp; <li><a href="#">List 3 element 1</a></li>&nbsp; &nbsp; <li><a href="#">List 3 element 2</a></li>&nbsp; &nbsp; <li><a href="#">List 3 element 3</a></li>&nbsp; &nbsp; <li class="none">Nothing found in this category</li></ul>&nbsp;JSconst select_all = (selector, selectee = document) =>Array.from(selectee.querySelectorAll(selector));const hide_item = item => item.style.display = 'none';const show_item = item => item.style.display = '';const item_text = item => item.textContent.toLowerCase();const compare = text => item => item_text(item).includes(text);const has_class = class_name => item => item.className.includes(class_name);const not_has_class = class_name => item => !has_class(class_name)(item);const filter_list = text => list => {&nbsp; &nbsp; let lis = select_all("li", list);&nbsp; &nbsp; let to_show = lis&nbsp; &nbsp; &nbsp; &nbsp; .filter(not_has_class('none'))&nbsp; &nbsp; &nbsp; &nbsp; .filter(compare(text));&nbsp; &nbsp; if (to_show.length === 0)&nbsp; &nbsp; &nbsp; &nbsp; to_show = lis.filter(has_class('none'));&nbsp; &nbsp; lis.forEach(hide_item);&nbsp; &nbsp; to_show.forEach(show_item);};const filter = (value) =>&nbsp; &nbsp; select_all(".combo").forEach(&nbsp; &nbsp; &nbsp; &nbsp; filter_list((value || '').toLowerCase())&nbsp; &nbsp; );const searchCombo = document.getElementById('searchCombo')searchCombo.addEventListener("keyup", function(e) {&nbsp; &nbsp; filter(e.target.value)});//Trigger filter when search input field cancel is clickedsearchCombo.addEventListener("search", function(e) {&nbsp; &nbsp; filter('')});function trigger(value) {&nbsp; &nbsp; searchCombo.value = value;&nbsp; &nbsp; filter(value)}document.getElementById('filter1').addEventListener("click", function() {&nbsp; &nbsp; trigger('element 1')});document.getElementById('filter2').addEventListener("click", function() {&nbsp; &nbsp; trigger('element 2')});document.getElementById('filter3').addEventListener("click", function() {&nbsp; &nbsp; trigger('element 3')});filter();&nbsp;