Showing suggestion box when typing in input box

Question

I'm trying to get some sort of suggestion box in my application. The basic idea is that, when typing in an input box, 5 options show up below the input box with possible entries.

The problem I am facing is that, while there is nothing entered in the input box, the box which gives the possible suggestions already shows (see Screenshot ). Of course, I only want it to show up when I enter something in the input box.

Any help?

Wout

CSS-code:

#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,... get a value in function "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

There is a standard way of doing that. HTML5 <datalist> tag! And the global browser support for it 74.5% . You may use the above fiddle as a fallback support. Watch this

Answer 2

Check this out: https://jsfiddle.net/gnph4evm/1/

I have added a new class:

.option{
   display:none;
}

and added it to all your options like:

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

added functions for toggling the visibility:

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

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

and for the grand finale, added onfocus and onfocusout calling thoose functions

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

Hope it's helpful

Answer 3

If the Data is stored in the database for suggestion.

Then, after creating the <input> field Make use of <datalist> tag and place it inside a <div> container dynamically replace the content. Here is how you can do it.

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

Now all you have to do is write Ajax code for it like

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();
}

After this just write the php code for it and check if the $_GET['value1'] is set or not. If not do nothing otherwise fetch the value

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