在输入框中输入时显示建议框

Question

我试图在我的应用程序中获得某种意见箱。 基本思想是，在输入框中键入时，输入框下方会显示 5 个选项，其中包含可能的条目。

我面临的问题是，虽然输入框中没有输入任何内容，但提供可能建议的框已经显示（参见屏幕截图）。 当然，我只希望它在我在输入框中输入内容时显示。

有什么帮助吗？

沃特

CSS 代码：

#suggestions {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid black;
    position: absolute;
    left: 310px;
    top: 5px;
    background-color: white;
    font-size: 12px;
}

JavaScript: --> option1, option2,... 在函数“giveSuggestion()”中获取一个值

<form id = "suggestions">
    <input     type = "text" 
               id = "insertText" 
               autocomplete="off" 
               onkeyup = "if (event.keyCode == 13) {SearchAddress(option1.text)}
                          else {giveSuggestion()}"/>
    <option id = "option1" onclick = "searchAddress(option1.text)"></option>
    <option id = "option2" onclick = "searchAddress(option2.text)"></option>
    <option id = "option3" onclick = "searchAddress(option3.text)"></option>
    <option id = "option4" onclick = "searchAddress(option4.text)"></option>
    <option id = "option5" onclick = "searchAddress(option5.text)"></option>
</form>

Answer 1

有一种标准的方法可以做到这一点。 HTML5 <datalist>标签！ 并且全球浏览器对它的支持率为 74.5% 。 您可以使用上面的小提琴作为后备支持。 看这个

Answer 2

看看这个： https : //jsfiddle.net/gnph4evm/1/

我添加了一个新类：

.option{
   display:none;
}

并将其添加到您的所有选项中，例如：

  <option class="option" id = "option1" onmousedown = "searchAddress(option1.text)" >text1</option>

添加了用于切换可见性的功能：

showOptions = function (){
    $('.option').show();
}

hideOptions = function (){
    $('.option').hide();
}

对于大结局，添加了调用 thoose 函数的 onfocus 和 onfocusout

<input     type = "text" 
               id = "insertText" 
               autocomplete="off" 
               onkeyup = "if (event.keyCode == 13) {SearchAddress(option1.text)}
                          else {giveSuggestion()}" onfocus='showOptions()' onfocusout='hideOptions()'/>

希望它有帮助

Answer 3

如果数据存储在数据库中以供建议。

然后，在创建<input>字段后，使用<datalist>标签并将其放置在<div>容器中动态替换内容。 这是您如何做到的。

<input type="text" name="search_email" list="listit" onkeyup="suggest(this.value)" id="search_email">
<div id="suggest_container" style="display:inline-block;">
    <datalist id="listit">
        <option ></option>
    </datalist>
</div>

现在您要做的就是为它编写 Ajax 代码，例如

function suggest(val){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
      document.getElementById('suggest_container').innerHTML=this.responseText;
      }
    };
    xhttp.open("GET", ("dyn_suggest.php?value1="+ val), true); 
    xhttp.send();
}

在此之后只需为它编写 php 代码并检查是否设置了 $_GET['value1'] 。 如果不是什么都不做，否则获取值

$count1=0; // for 5 values
$res=mysqli_query($con,$query);

echo "<datalist id=\"listit\">";
if(mysqli_num_rows($res)!=0){
    while($i= mysqli_fetch_row($res)){
        $count1++;
        echo "<option value='".$i[0]."' >";
        if($count1==5){
            break;
        }
    }
}
echo "</datalist>";