Javascript和PHP協調一致-搜索功能

Question

我目前正在構建“數據表”式的搜索功能。 當用戶在搜索框中輸入內容時，我想更新包含其值的div。

目前，我使用此輸入字段執行此操作：

<input type="text" id="IdSearch" onkeyup="Search()" value="<?php echo $searchtext; ?>" onfocus="this.value = this.value;" name="zoeken" autofocus>

onfocus="this.value = this.value;確保在重新加載頁面后，選擇器位於值的后面。

<script>
    function Search() {
        var x = document.getElementById("IdSearch").value;
        window.location.href = "index.php?search" + x;
    }
</script>    

接着

if (isset($_GET['search'])) {
    $searchtext = $_GET['search'];
    echo $searchtext;
    $sql = "SELECT blabla FROM blabla";
    //execute sql statement and update the table now..
} else {
    //generate the standard table
}

可以，輸出正確的結果，但是速度很慢。 每次輸入字符時需要重新加載頁面。

因此，也許，也許，每次按鍵時，我都能以某種方式檢索搜索框的值，並以此方式更新我的表格？

我知道PHP會運行，然后在沒有頁面重新加載的情況下不會再次運行。 也許我可以重新加載某些元素？ 我不知道。

請不要讓我所有的“ PHP在服務器上運行”。 我知道，這就是為什么我目前正在使用此方法。 我什至不會嘗試在必須完成的時間范圍內學習Ajax。

任何幫助表示贊賞。

Answer 1

-您可以使用“” 按鈕提交搜索。...並刪除onkeyup =“ Search（）”

<button type="submit">Search</button>

-或者你可以嘗試發布表單到iframe ....但仍將低迷 。

- 可行的方法是AJax ：輸入時動態更新內容。

Answer 2

• 使用AJAX（例如$ .ajax）並在json中創建php響應。 然后使用javascript模板或MVVM框架（例如angular）重新創建您的內容。
• 另一種方法是返回所需內容的一部分，然后注入$（'＃mycontent'）。html（response）。

Answer 3

我什至不會嘗試在必須完成的時間范圍內學習Ajax。

恐怕您將不得不學習AJAX或提交使用iFrame的建議。 如果您要使用AJAX，那么這里有一些很棒的庫（ JQuery或Zepto.js或qwest ）使它們變得非常容易快速學習。

也許我可以重新加載某些元素？

是! 整個Web開發人員社區都強烈反對使用iframe ，但它確實可以滿足您的要求。 查看MDN有關編寫iframe腳本的信息。 您可以使用與現在在window上相同的屬性，但是它可能仍然很緩慢，並且很可能也很煩人。

因此，如果您需要我的建議，請使用AJAX。 但這是您的選擇！

Answer 4

試試jquery $.post這就是您想要的一切。

http://api.jquery.com/jquery.post/