时间戳

首页 > 解决方案 > 如何使用 Javascript 和 HTML 从搜索栏中获取输入并同时处理搜索列表？

javascript - 如何使用 Javascript 和 HTML 从搜索栏中获取输入并同时处理搜索列表？

问题描述

我正在尝试制作一个看起来像亚马逊的网站来教我自己如何制作一个直销网站。我做了首页，我已经知道如何在两个页面之间传递变量。我做了一个测试页。它将用户放入搜索栏中的文本存储到一个名为 l 的 javascript 变量中。它将 l 作为文本发布在名为 data 的 div 上。接下来，它会从搜索栏中整理出输入，并相应地更改其下方的搜索列表。这几乎完美无缺。除非我尝试使用我的代码，否则会发布变量 l 并更改搜索列表，但几分之一秒后，搜索列表会恢复到原来的顺序。有谁知道如何解决这一问题？

代码：

<!DOCTYPE html>
<html>
<body>

  <form action="Test1Verkoopwedstrijd2.html" method="get"> 
  <input type="text" name="serialNumber" id="myInput"/>
  <input type="submit" value="Submit" onclick="myFunction()"/>
</form>

<div id="data"></div>

<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

<script>
function processForm(){
        var parameters = location.search.substring(1).split("&");
            var temp = parameters[0].split("=");
            l = unescape(temp[1]);
            document.getElementById("data").innerHTML = l;
        }
    processForm();

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";
        }
    }
}
</script>

</body>
</html>

先感谢您。

标签： javascripthtml

解决方案

您的问题是，当您按下提交按钮时，您会重新加载 Test1Verkoopwedstrijd2.html 文件。所以在这种情况下不要使用提交按钮，或者使用不同的事件或者返回 false 给事件：

function processForm(){
        var parameters = location.search.substring(1).split("&");
            var temp = parameters[0].split("=");
            l = unescape(temp[1]);
            document.getElementById("data").innerHTML = l;
        }
    processForm();

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";
        }
    }
    return false;
}
<form action="Test1Verkoopwedstrijd2.html" method="get"> 
  <input type="text" name="serialNumber" id="myInput"/>
  <input type="submit" value="Submit" onclick="return myFunction()"/>
</form>

<div id="data"></div>

<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

您可以在输入文本上使用，它会立即过滤结果：

function processForm(){
        var parameters = location.search.substring(1).split("&");
            var temp = parameters[0].split("=");
            l = unescape(temp[1]);
            document.getElementById("data").innerHTML = l;
        }
    processForm();

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";
        }
    }
}
<form action="Test1Verkoopwedstrijd2.html" method="get"> 
  <input type="text" name="serialNumber" id="myInput" onkeyup="myFunction()"/>
  <input type="submit" value="Submit"/>
</form>

<div id="data"></div>

<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

在这种情况下，您可以在用户按下提交按钮时显示不同的页面。

但稍后，查看 ajax 请求，因为这就是这些结果正常工作的方式。使用 ajax，您要求服务器返回结果，然后您只需显示它（当然是文本框上的 onkeyup 事件）。

推荐阅读