在搜索框中輸入關鍵字時顯示div

Question

基本上我想要做的就是在搜索框中輸入關鍵字時顯示div。例如，我在框中鍵入「電視」，它會顯示一個電視ID，但我想要做這個約5個結果。這可以用JavaScript來完成嗎？

這是我的一切：

HTML：

<form class="pure-form"> 
<legend></legend> 
    <input type="text" placeholder="Example: Television" class="pure-input-rounded"> 
<button type="button" name="answer" onclick="showDiv()" class="pure-button">Search</button> 

<div id="noresults" style="display:none; font:'proxima-nova'; color:#BA2E31;" class="results" >No Results were found! :(</div> 

的Javascript：

function showDiv() { 
    document.getElementById('noresults').style.display = "block"; 
} 

jsFiddle

Live site

Answer 1

您可以使用onkeypress屬性將您的文本框的值與預定義的字符串進行比較。

<form class="pure-form"> 
<legend></legend> 
    <input type="text" placeholder="Example: Television" class="pure-input-rounded" onkeypress="checkMatch(this)"> 
<button type="button" name="answer" onclick="showDiv()" class="pure-button">Search</button> 

function checkMatch(obj) { 
    /* get obj text and compare is to some other string */ 
} 

Answer 2

當然。您的代碼會是這個樣子：

<form class="pure-form"> 
    <legend></legend> 
    <input type="text" placeholder="Example: Television" class="pure-input-rounded" onkeyup="showDiv(this.value)"> 
<button type="button" name="answer" class="pure-button">Search</button> 
</form> <script> 
function showDiv(value) { 
if (value.charAt(value.length - 1) == ' ') 
    document.getElementById('noresults').style.display = "block"; 
else 
    document.getElementById('noresults').style.display = "none"; 
} 
</script> 
<div id="noresults" style="display:none; font:'proxima-nova'; color:#BA2E31;" class="results" >No Results were found! :(</div> 

Answer 3

所以，Tsikon已經回答了你需要有一個事件爲您的文本字段（showdiv（）），它 對於如相關的JS函數定義：onkeypress事件/ Onchange和字段的長度> 0 只有在輸入至少3個字符時，您可能會想到只顯示div，而您可能知道在div中顯示的內容。