Auto complete suggestion Jquery,PHP with nice form

Hi friend, I hope you are doing good. I am describing how to create auto complete suggestion with help of jquery and php.
Its very common features in web development, You can add autosuggestion for country filtering, username filter etc.

auto-suggestion

Step 1:

first we will create HTML layout file which is contain all reference file

HTML CODE
Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script language="javascript" type="text/javascript" src="niceforms.js"></script>  
<link rel="stylesheet" type="text/css" media="all" href="niceforms-default.css" /> 

 <div id="container">
<form class="niceform" method="post" action="vars.php">
    <fieldset>
        <dl>
            <dt><label for="email">Country Name:</label></dt>
            <dd><input type="text" size="30″ value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />  </dd>
            <dd>
            <div class="suggestionsBox" id="suggestions" style="display: none;">  
                <div class="suggestionList" id="autoSuggestionsList">  
                    &nbsp;  
                </div>  
                  
            </div> 
            </dd>
        </dl>
    </fieldset>
   
</form>
</div>
Step 2:

We will define CSS style in above file.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
</script>  
  
<style type="text/css">  
    .suggestionsBox {  
        background-color: #212427;
    border: 2px solid #000;
    color: #fff;
    margin: -10px 0 0;
    position: relative;
    width: 186px;
    }  
      
    .suggestionList {  
        margin: 0px;  
        padding: 0px;  
    }  
      
    .suggestionList li {  
        list-style: outside none none;
        margin: 0px 0px 3px 0px;  
        padding: 3px;  
        cursor: pointer;  
    }  
      
    .suggestionList li:hover {  
        background-color: #659CD8;  
    }  
</style>
Step 3:

We will define JavaScript code which will fire ajax method to get all suggestion from database.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">  
    function lookup(inputString) {  
        if(inputString.length == 0) {  
            // Hide the suggestion box.  
            $('#suggestions').hide();  
        } else {
            $.post("action.php", {queryString: ""+inputString+""}, function(data){  
                if(data.length >0) {  
                    $('#suggestions').show();  
                    $('#autoSuggestionsList').html(data);  
                }  
            });  
        }  
    } // lookup  
      
    function fill(thisValue) {
        $('#inputString').val(thisValue);  
        setTimeout("$('#suggestions').hide();", 200);  
    }  
</script>
Step 4:

Now we will create PHP script file, It has all Sql Query to get matching records for show auto suggestion.

PHP Code
Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?php  
$dbLink = mysql_connect('localhost', 'root' ,'') ;  
$db = mysql_select_db('test',$dbLink);  
    //$db = new mysql_connect('localhost', 'root' ,”, 'test');  
      
    if(!$db) {  
        // Show error if we cannot connect.  
        echo 'ERROR: Could not connect to the database.';  
    } else {  
        // Is there a posted query string?  
        if(isset($_POST['queryString'])) {  
            $queryString = mysql_real_escape_string($_POST['queryString']);  
              
            // Is the string length greater than 0?  
              
            if(strlen($queryString) >0) {  
                  
                // YOU NEED TO ALTER THE QUERY TO MATCH YOUR DATABASE.  
                  
             $query = mysql_query("SELECT countryName FROM countries WHERE countryName LIKE '$queryString%' LIMIT 10");  
              
                if($query) {  
                    // While there are results loop through them - fetching an Object (i like PHP5 btw!).  
                      
                    while ($result = mysql_fetch_row($query)) { 
                          
                        // YOU need to change $result->value to $result->your_colum  
                        echo '<li onClick="fill(\''.$result[0].'\');">'.$result[0].'</li>';  
                    }  
                } else {  
                    echo 'ERROR: There was a problem with the query.';  
                }  
            } else {  
                // Dont do anything.  
            } // There is a queryString.  
        } else {  
            echo 'There should be no direct access to this script!';  
        }  
    }  
?>