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

基本上，我想做的是显示一个div，如果在搜索框中输入了关键字。例如，我在框中键入“TV”，它将显示一个电视的div和ID，但我想这样做大约5个结果。这可以用Javascript实现吗

这就是我的全部：

HTML:

---

您可以使用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 */
}

搜寻
功能检查匹配（obj）{
/*获取obj文本并将其与其他字符串进行比较*/
}

当然可以。您的代码如下所示：

<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>

搜寻
函数showDiv（值）{
if（value.charAt（value.length-1）=''）
document.getElementById（'noresults'）.style.display=“block”；
其他的
document.getElementById（'noresults'）.style.display=“无”；
}
未找到任何结果！：(

因此，由于Tsikon已经回答了问题，您需要为文本字段定义一个事件，并与之关联一个JS函数（showdiv（）） 例如：Onkeypress/Onchange和字段长度>0

---

当您可能知道在div中显示什么时，您可能会考虑仅在输入至少3个字符时才显示div。

@AlexandruNedlcu当我输入此项并输入例如TV时，它不会显示div TV？是否需要更改？oninput用于验证，因为它捕获单击/键/粘贴/一次完成削减/取消活动。。。

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

<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 */
}

<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>