Search code examples
phpautocompletesearch-engineautosuggest

Create a basic auto-complete suggestion list

How can I create an auto-complete suggestion list below the search box that:

  1. Users can use keyboard Down & Up key to navigate between them?

  2. Users can use Esc button to close the suggestion list?

  3. When users press keyboard Down or Up key, the suggestion that is selected will be filled inside the search box?

This is my current code for index.php:

<?php
include 'script_suggestion.php';
include 'script_close_suggestion_box.php';
?>
<html>
    <head>
        <title>
            Brandon's Search Engine
        </title>
        <style type="text/css">
            #suggestion {
                border: 1px solid black;
                visibility: hidden;
                position: absolute;
                background-color: white;
                z-index: 10;
            }
            #suggestion a {
                font-size: 12pt;
                color: black;
                text-decoration: none;
                display: block;
                width: 648px;
                height: auto;
                text-align: left;
                padding: 2px;
            }
            #suggestion a:hover {
                background-color: #dddddd;
                width: 644px;
                padding: 2px;
            }
        </style>
    </head>
    <body>
        <form method="GET" action="search.php" name="q">
            <table align="center">
                <tr>
                    <td>
                        <h1><center>Brandon's Search Engine</center></h1>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <input type="text" name="q" style="height: 27px; width: 650px; padding: 2px" placeholder="Search Now"
                               onkeyup="getSuggestion(this.value)" autocomplete="off" onblur="closeBox()"/>

                        <div id="suggestion" style="width: 648px">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        <input type="submit" value="Search" style="height: auto; width: 60px; padding: 2px" />
                        <input type="reset" value="Clear" onclick="closeBox()" style="height: auto; width: 50px; padding: 2px" />
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        Can't find your site? <br /> Insert <a href="insert.php">here</a>.
                    </td>
                </tr>
            </table>
            <input type="hidden" name="page" value="1" />
        </form>
    </body>
</html>

Thanks in advance.

Solution

  • Use Jquery UI AutoComplete, here is the example code

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {

  var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>
</head>
<body>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>


</body>
</html>

    Example taken from - http://jqueryui.com/autocomplete/

        /**
         This code below loads the autocomplete for your input field,
         where in "#tags" is the id of your element where this should
         be displayed in and "availableTags" is the array of list of
         possible values to be shown in autocomplete list
     */
     $( "#tags" ).autocomplete({
      source: availableTags
    });

    If you want to fetch data dynamically through PHP that is stored in database, you may want to use http://jqueryui.com/autocomplete/#remote