JavaScript使div變空白通過點擊它外面

我有一些搜索/文本框，使用AJAX搜索數據庫表，並將結果/搜索建議放在類似於谷歌搜索的div中。現在除了重新加載頁面之外，沒有辦法清空這些div。我想這樣做，如果您退格以使文本框在Google搜索中處於空白狀態，則div將清空。現在，當您退格時，它會將其視爲搜索「」並返回所有結果。或者，也可以讓您在框外單擊以清空它。否則，我會結束在頁面上填滿的div，使其混亂。我想我要麼改變查詢，以便如果字符串是空的，它會返回任何東西或用JavaScript的東西，如果你點擊框外的空格。感謝您的任何建議：JavaScript使div變空白通過點擊它外面

以下簡稱代碼：

的Javascript

function getHints(str) { 
... 
document.getElementById("results").innerHTML=xmlhttp.responseText;//places output in results div 
... 
xmlhttp.open("GET","search.php?searchterm="+str,true); 
xmlhttp.send(); 
}

HTML

<input type="text" id="search" onkeyup="getHints(this.value)">Search<div id="results"></div>

PHP

$str = $_REQUEST['str']; 
$sql = "SELECT * FROM table WHERE name LIKE '%$str%'"; 
search database and echo out results.

來源

2012-10-25 user1260310

請檢查谷歌使用'HASHCHANGE'事件。並在密鑰上相應地設置哈希。因此，歷史可以重複：D –

只要檢查空字符串和過程雅高dingly：

function getHints(str) { 
    if (str == "") { 
     document.getElementsById("results").innerHTML = ""; 
    } 
    else { 
    ... 
    } 
}

來源

2012-10-25 11:09:58 davidethell

現在，當您退格以清空div時，可以避免顯示所有結果，但不會清空以前寫入div的文本。我需要另一個事件處理程序嗎？ – user1260310

@ user1260310，此代碼通過將innerHTML設置爲空字符串來清空結果div。是否還有另一個你期望排除的div？ – davidethell

沒有那個div。我想我可以把條件放在Php。奇怪的是它不工作在js – user1260310

使用jQuery，它會幫助你很多做事的時候就是這樣，AJAX，操縱DOM等

function getHints(str) { 
    ... 
    if (str === "") 
    { 
     document.getElementById("results").innerHTML = ""; 
    } 
    else 
    { 
     document.getElementById("results").innerHTML=xmlhttp.responseText; 
     ... 
     xmlhttp.open("GET","search.php?searchterm="+str,true); 
     xmlhttp.send(); 
    } 
}

來源

2012-10-25 11:10:30 oldwizard

JavaScript使div變空白通過點擊它外面

回答

相關問題