在搜索框中输入关键字时显示 div

Question

基本上，如果在搜索框中输入了关键字，我想做的是显示一个 div。例如，我在框中键入“电视”，它将显示一个 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 已经回答的那样，您需要为您的文本字段定义一个事件和一个与之关联的 JS 函数 (showdiv()) 例如：Onkeypress/Onchange 和字段长度 >0 当您可能知道要在 div 中显示什么时，您可能会考虑仅在输入至少 3 个字符时才显示 div。