Question

我正在尝试在我的应用程序中获得某种建议框。基本思路是，在输入框中输入时，输入框下方会显示5个选项，并带有可能的条目。

我面临的问题是，虽然输入框中没有输入任何内容，但已显示可能建议的框（请参阅Screenshot）。当然，我只想在输入框中输入内容时显示它。

任何帮助？

Wout的

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： - ＆gt; 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

检查一下： 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();
}

并为大结局添加onfocus和onfocusout调用thoose函数

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

希望它有用

Answer 2

有一种标准的方法可以做到这一点。 HTML5 <datalist>代码！全球浏览器支持它74.5%。您可以使用上述小提琴作为后备支持。 Watch this

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

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

3 个答案: