如何從搜索欄獲取輸入並使用Javascript和HTML同時處理搜索列表？

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 個解決方案

解決方案1
2 2019-04-10 13:47:43

如何從搜索欄獲取輸入並使用Javascript和HTML同時處理搜索列表？

問題描述

1 個解決方案

解決方案1 2 2019-04-10 13:47:43

解決方案1
2 2019-04-10 13:47:43