在輸入框中輸入時顯示建議框

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