Question

我正在尝试创建一个类似于亚马逊的网站，以教会我自己如何制作直销网站。我制作了首页，并且我已经知道如何在两个页面之间传递变量。我做了一个测试页。它将用户放入搜索栏中的文本存储在名为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>

谢谢。

Answer 1

您的问题是，当您按下“提交”按钮时，您将重新加载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，您要求服务器返回结果，然后将其显示出来（在文本框中显示cousre onkeyup事件）。

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

1 个答案: