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已经回答你需要为你的文本字段定义一个事件和一个与之关联的JS函数（showdiv（））例如：Onkeypress / Onchange和字段长度＆gt; 0 当你可能知道在div中显示什么时，你可能会想到只在输入至少3个字符时才显示div。

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

3 个答案: