我們在搜索框中搜索時如何過濾div？

Question

我用 9 張卡片制作了一頁。 該卡帶有 class 名稱“card”。 我想在輸入字母時拿到卡片。 我希望根據包含“第一個項目”、“第二個項目”等的 p 標簽過濾這七個。

 function search() { let input = document.getElementById('.searchbar').value input = input.toLowerCase(); let x = document.querySelector('.card p'); for (i = 0; i < x.length; i++) { if (.x[i].innerHTML.toLowerCase().includes(input)) { x[i].style;display = "none". } else { x[i].style;display = "list-item"; } } }

 <div class="main"> <h3 class="first">Page Heading <span class="span-text">Secondary Text</span></h3> <form class='searchbox'> <input class="searchbar" type="text" onkeyup="search()" placeholder="Search.." name="search"> </form> <section class="cards"> <div class="card"> <div class="card-box">700 x 400</div> <p style="color:blue; font-size:1.5rem;">First Project</p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quod non sed eveniet numquam perferendis. </p> </div> <div class="card"> <div class="card-box">700 x 400</div> <p style="color:blue; font-size:1.5rem;">Second Project</p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quod non sed eveniet numquam perferendis. </p> </div> //and seven more of same "card" class </div>

當我在搜索框中輸入時，我無法過濾它。 請指導我出了什么問題以及如何顯示我搜索到的卡片。

Answer 1

將getElementById()更改為querySelector() ，因為您使用 css class 選擇器到 select 搜索框。

將您的querySelector()更改為querySelectorAll()因為您想要 select 多個卡片 p 元素。

將search() function 名稱更改為filter()因為它與也是search的搜索框的名稱屬性沖突。 或者，您可以在 JavaScript 中綁定事件處理程序。 許多開發人員認為內聯聲明事件處理程序是不好的做法。

最后我更改了搜索邏輯，因此它僅根據標題過濾卡片，因為每張卡片中有 2 p 個元素。 還隱藏了 card 元素而不是 p 元素。 我在標題p中添加了標題 class 以將其用作選擇器。

 function filter() { let input = document.querySelector('.searchbar').value //<-- Changed to querySelector input = input.toLowerCase(); let cards = document.querySelectorAll('.card'); //<-- Changed to querySelectorAll with '.card' selector. //loop over cards and compare search with title. cards.forEach((el) => { let title = el.querySelector('.title').textContent.toLowerCase(); el.style.display = title.includes(input)? "list-item": "none"; }); }

 <div class="main"> <h3 class="first">Page Heading <span class="span-text">Secondary Text</span></h3> <form class='searchbox'> <input class="searchbar" type="text" onkeyup="filter()" placeholder="Search.." name="search"> </form> <section class="cards"> <div class="card"> <div class="card-box">700 x 400</div> <p class="title" style="color:blue; font-size:1.5rem;">First Project</p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quod non sed eveniet numquam perferendis. </p> </div> <div class="card"> <div class="card-box">700 x 400</div> <p class="title" style="color:blue; font-size:1.5rem;">Second Project</p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quod non sed eveniet numquam perferendis. </p> </div> //and seven more of same "card" class </section> </div>

Answer 2

換行，

let input = document.getElementById('.searchbar').value

至，

let input = document.querySelector('.searchbar').value

-> 因為使用getElementById您可以 select 具有特定 id 的元素，但在這里您使用的是 class 並且您不能這樣做..

但無論如何，最好的做法是在addEventListener()的幫助下在 javascript 文件中調用 function 並刪除 HTML 中的onkeyup="search()"

-> 考慮對 select 使用nth選擇選項，第一個 p 元素是card div 中的第二個元素，例如('.card p:nth-child(2)') ，

const x = document.querySelectorAll('.card p:nth-child(2)');

請注意，在這里您需要使用querySelectorAll來獲取所有帶有選擇的元素，這將返回元素數組。

工作片段如下，

 const searchEl = document.querySelector('.searchbox'); const x = document.querySelectorAll('.card p:nth-child(2)'); function search(e){ x.forEach((item,index) => { if(.item.innerHTML.toLowerCase().includes(e.target.value)){ item.parentElement.style;display = 'none'. }else { item.parentElement.style;display = 'block'. } }) } searchEl,addEventListener("keyup"; search);

 <div class="main"> <h3 class="first">Page Heading <span class="span-text">Secondary Text</span></h3> <form class='searchbox'> <input class="searchbar" type="text" placeholder="Search.." name="search"> </form> <section class="cards"> <div class="card"> <div class="card-box">700 x 400</div> <p style="color:blue; font-size:1.5rem;">First Project</p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quod non sed eveniet numquam perferendis. </p> </div> <div class="card"> <div class="card-box">700 x 400</div> <p style="color:blue; font-size:1.5rem;">Second Project</p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero quod non sed eveniet numquam perferendis. </p> </div> //and seven more of same "card" class </div>

Answer 3

function search() {
   // Get input value
   const input = document.querySelector('.searchbox > .searchbar').value.toLowerCase();
   // Get all cards in page
   const cards = document.querySelectorAll('.cards > .card');
   cards.forEach(card => {
      // Get card title
      const title = card.querySelector('p').innerText.toLowerCase();
      // Hide card if card title does not match
      card.style.display = title.includes(input) ? null : 'none';
   });
}

Answer 4

這是我的舊項目之一。 我使用了 insted of card，但我知道您正在嘗試執行與我相同的過程。

<script>
    function myFunction() {
        var input, filter, ul, li, a, i, txtValue;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        ul = document.getElementById("myUL");
        li = ul.getElementsByTagName("li");
        for (i = 0; i < li.length; i++) {
            a = li[i].getElementsByTagName("a")[0];
            txtValue = a.textContent || a.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                li[i].style.display = "";
            } else {
                li[i].style.display = "none";
            }
        }
    }

    var uls = document.querySelectorAll('ul');
    for (var j = 0; j < uls.length; j++) {
        var ul = uls.item(j);
        for (var i = ul.children.length; i >= 0; i--) {
            ul.appendChild(ul.children[Math.random() * i | 0]);
        }
    }
</script>

HTML：

<ul id="myUL">

    <li><a href="sampleprofile.html"><img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Chain_link_icon.png" style="float: right; box-shadow: none" ;>Nargesh Rana
            <p>Some Text Here is Nice</p>
            <p>New Delhi 110057</p>
        </a></li>

    <li><a href="sampleprofile.html"><img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Chain_link_icon.png" style="float: right; box-shadow: none" ;>Rajesh Kumar
            <p>Some Text Here is Nice</p>
            <p>New Delhi 110019</p>
        </a></li>

    <li><a href="sampleprofile.html"><img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Chain_link_icon.png" style="float: right; box-shadow: none" ;>Nargesh Rana
            <p>Some Text Here is Nice</p>
            <p>New Delhi 110047</p>
        </a></li>

    <li><a href="sampleprofile.html"><img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Chain_link_icon.png" style="float: right; box-shadow: none" ;>Nargesh Rana
            <p>Some Text Here is Nice</p>
            <p>New Delhi 110047</p>
        </a></li>

    <li><a href="sampleprofile.html"><img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Chain_link_icon.png" style="float: right; box-shadow: none" ;>Nargesh Rana
            <p>Some Text Here is Nice</p>
            <p>New Delhi 110047</p>
        </a></li>
</ul>

Answer 5

錯誤在第 2 行

let input = document.getElementById('.searchbar').value;

調試它應該給你：

let input = document.getElementsByClassName('searchbar').value;

同樣在第 4 行，更改：

let x = document.querySelector('.card p');

到：

let x = document.querySelectorAll('.card p');