Question

我一直在尝试使搜索过滤器正常工作，但无法使其正常工作。我是一个初学者，但尽我所能使其正常工作。任何可以帮助您的人:)

html

import os
import shutil

if len(os.listdir(folder_path)) == 0: # Check is empty..
    shutil.rmtree(folder_path) # Delete..

下面的脚本。

            <div class="notes_search">
                <input type="search" id="search_input" onkeyup="searchFilter()" placeholder="Search...">
            </div>

            <ul class="notes_list">
            </ul>

            <p class="notes_empty-msg">Nothing to show.</p>

        </section>

    </div>

Answer 1

您的代码有很多问题。

首先，它是getElementById而不是getElementsById，但是您可能会发现使用querySelector和querySelectorAll更容易使用，因为它们与CSS选择器相匹配（类似于jQuery）。 / p>

第二，您没有ID为search的元素。

第三，您的HTML不包含列表项，因此它无法搜索任何内容。

这是一个带有注释的工作版本（使用一些您可能不熟悉但可以使代码更简洁的更现代的JS方法）。注意：它使用一个类使这些项目可见或不可见，并在文本内容中进行搜索，而不仅仅是检查它是否位于内容的开头，从而使它更具灵活性。

function searchFilter() {

  // You might find `querySelector` easier to use as it
  // allows you to correspond elements with CSS selectors
  const input = document.querySelector('#search');
  const filter = input.value.toUpperCase();

  const ul = document.querySelector('ul');
  const lis = ul.getElementsByTagName("li");

  for (i = 0; i < lis.length; i++) {

    const item = lis[i];
    const itemContent = item.textContent.toUpperCase();

    // `textContent` might be more appropriate here
    // You can use the newer string method `includes`
    // to see if `filter` appears in the text content
    if (filter.length && itemContent.includes(filter)) {

      // Here I've used `classList` as the more modern
      // method way of adding and removing classes
      item.classList.add('visible');
    } else {
      item.classList.remove('visible');
    }

  }
  
}

li { display: none; }
.visible { display: block }

<div class="notes_search">
  <input type="search" id="search" onkeyup="searchFilter()" placeholder="Search...">
</div>

<ul class="notes_list">
  <li>Bob</li>
  <li>Sue</li>
  <li>Rita</li>
  <li>Rita and Bob</li>
  <li>John</li>
</ul>

<p class="notes_empty-msg">Nothing to show.</p>

</div>

进一步阅读

Answer 2

您在这里有几处错误的地方：

应该为getElementById，而不是getElementsById（不是复数）
您的输入元素的ID为“ search_input”，但是您正在尝试查找名称为“ search”的元素。查找元素时，它应该是 id的确切名称，而不是包含该元素的部分单词。因此，尝试input=document.getElementById('search_input');
尝试使用innerText而不是innerHtml：我记得，innerHtml以html格式而不是纯文本形式返回。

index.html

<div class="notes_search">
                <input type="search" id="search_input" onkeyup="searchFilter()" placeholder="Search...">
            </div>

            <ul class="notes_list">
              <li><a href = "/">hi</a></li>
              <li><a href = "/">hi</a></li>
              <li><a href = "/">bye</a></li>
            </ul>

            <p class="notes_empty-msg">Nothing to show.</p>

        </section>

    </div>

index.js

function searchFilter() {
    // Declare variables
    var input, filter, ul, li, a, i, text;
    input = document.getElementById('search_input');
    filter = input.value.toUpperCase();
    ul = document.getElementsByClassName('notes_list')[0];
    li = ul.getElementsByTagName("li");


    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        text = a.textContent || a.innerText;
        if (a.innerHTML.toUpperCase().indexOf(filter)===0) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

我还向您的html中添加了一些 li 和 a 标记项，因为您没有这些标记项，并且无法找到不在其上的标记html。

Answer 3

我不确定您要实现的目标，但是简单的html数据列表可以解决您的问题：

    <input list="your-choices" id="search_input" placeholder="Search...">

    <datalist id="your-choices">
        <option value="car">
        <option value="tree">
        <option value="street">
        <option value="sky">
        <option value="whatever">
    </datalist>

Answer 4

您可以通过Jquery搜索

var searchRequest = null;

$(function () {
    var minlength = 3;

    $("#sample_search").keyup(function () {
        var that = this,
        value = $(this).val();

        if (value.length >= minlength ) {
            if (searchRequest != null) 
                searchRequest.abort();
            searchRequest = $.ajax({
                type: "GET",
                url: "sample.php",
                data: {
                    'search_keyword' : value
                },
                dataType: "text",
                success: function(msg){
                    //we need to check if the value is the same
                    if (value==$(that).val()) {
                        //Receiving the result of search here
                    }
                }
            });
        }
    });
});

无法过滤搜索

4 个答案: