亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

用 onclick-event 替換搜索字段中的輸入不會更新列表

用 onclick-event 替換搜索字段中的輸入不會更新列表

拉莫斯之舞 2023-11-12 15:28:57
我有一個搜索字段可以過濾三個不同的列表。我想要一個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>
查看完整描述

2 回答

?
慕的地10843

TA貢獻1785條經驗 獲得超8個贊

如果您對 HTML 有一定的靈活性，我的建議是：


我認為如果您不需要 a 標簽，只要將 aclass="filter_to" data-filter_to_term="element 1"標簽移至 p 標簽即可。


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


const filter_list = text => list => {

  let lis = select_all("li", list);

  let to_show = lis

    .filter(not_has_class('none'))

    .filter(compare(text));


  if (to_show.length === 0)

    to_show = lis.filter(has_class('none'));


  lis.forEach(hide_item);

  to_show.forEach(show_item);

};


const search_box = document.getElementById('searchCombo');


const filter = (text) =>

  select_all(".combo").forEach(

    filter_list((text || '').toLowerCase())

  );


const set_filter = (text) => {

  search_box.value = text;

  filter(text);

};


const onclick_filter_to = (event) => {

  event.preventDefault();

  set_filter(event.target.dataset.filter_to_term);

};


select_all(".filter_to").forEach(

  (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">

    <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>

看起來用 input 替換 keyup 可能適用于 Chrome 中的取消 X 按鈕（但我以前沒有使用過）。



查看完整回答
反對 回復 2023-11-12
?
慕容3067478

TA貢獻1773條經驗 獲得超3個贊

這是工作演示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">

    <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> 

JS


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


const filter_list = text => list => {

    let lis = select_all("li", list);

    let to_show = lis

        .filter(not_has_class('none'))

        .filter(compare(text));


    if (to_show.length === 0)

        to_show = lis.filter(has_class('none'));


    lis.forEach(hide_item);

    to_show.forEach(show_item);

};


const filter = (value) =>

    select_all(".combo").forEach(

        filter_list((value || '').toLowerCase())

    );


const searchCombo = document.getElementById('searchCombo')

searchCombo.addEventListener("keyup", function(e) {

    filter(e.target.value)

});

//Trigger filter when search input field cancel is clicked

searchCombo.addEventListener("search", function(e) {

    filter('')

});


function trigger(value) {

    searchCombo.value = value;

    filter(value)

}

document.getElementById('filter1').addEventListener("click", function() {

    trigger('element 1')

});

document.getElementById('filter2').addEventListener("click", function() {

    trigger('element 2')

});

document.getElementById('filter3').addEventListener("click", function() {

    trigger('element 3')

});



filter(); 


查看完整回答
反對 回復 2023-11-12
  • 2 回答
  • 0 關注
  • 146 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號