AJAX Get Search Suggestions

AJAX is a method for retrieving data from a server without refreshing the web page. Below, we have a simple example program to demonstrate how AJAX can be used to generate search suggestions. This file calls back to itself and returns a list of suggested names.

IMPORTANT: This file must be accessed via a web server. That is, it must be on a server or served by a web server on a local machine. For example, if the file is local the program could be run by entering http://localhost:8080/XoaxGetSearchSuggestions.php into the address bar of your browser, if the site is set up to run on port 8080. See our video on how to install and use IIS, if you do not know how to set up a web server.

XoaxGetSearchSuggestions.php

<?php

if (isset($_REQUEST['keyInitial'])) {
  // Array with names
  $saBiblicalNames = ["Aaron", "Abel", "Abraham", "Adam", "Amos", "Andrew", "Ariel",
  "Balthasar", "Barnabas", "Bartholomew", "Baruch", "Bathsheba", "Benjamin", "Boaz",
  "Cain", "Caleb", "Cephas", "Chloe", "Claudia", "Cleopas", "Crispus", "Cyrus",
  "Daniel", "Darius", "David", "Deborah", "Delilah", "Dinah", "Dionysius", "Ebenezer",
  "Elam", "Elijah", "Elisha", "Elizabeth", "Emmanuel", "Enoch", "Esau", "Esther", "Eve",
  "Ezekiel", "Ezra", "Felix", "Festus", "Gabriel", "Gad", "Gaius", "Gideon", "Gilead",
  "Goliath", "Gomer", "Hagar", "Haman", "Hannah", "Havilah", "Herod", "Hezekiah", "Hiram",
  "Hosanna", "Hosea", "Ichabod", "Ira", "Isaac", "Isaiah", "Ishmael", "Israel", "Jacob",
  "Jair", "James", "Japheth", "Jared", "Jason", "Jeremiah", "Jericho", "Jesse", "Jesus",
  "Jethro", "Jezebel", "Joachim", "Job", "Joel", "John", "Jonah", "Joseph", "Joshua",
  "Judah", "Judas", "Jude", "Judith", "Laban", "Lazarus", "Leah", "Levi", "Luke",
  "Magdalen", "Malachi", "Maria", "Mark", "Mary", "Matthew", "Matthias", "Micah",
  "Michael", "Moab", "Mordecai", "Moses", "Naomi", "Naphtali", "Nathan", "Nathaniel",
  "Nebo", "Nehemiah", "Nicodemus", "Noah", "Obadiah", "Obed", "Omar", "Paul", "Peter",
  "Philemon", "Philip", "Phoebe", "Rachel", "Rahab", "Raphael", "Rebekah", "Reuben",
  "Ruth", "Salome", "Samson", "Samuel", "Sarah", "Sargon", "Saul", "Selah", "Seth",
  "Shem", "Silas", "Simeon", "Simon", "Solomon", "Stephen", "Tabitha", "Tamar",
  "Thaddeus", "Thomas", "Timothy", "Titus", "Tobias", "Tobit", "Uriah", "Zachary", "Zion"];

  // get the q parameter from URL
  $sInitial = $_REQUEST['keyInitial'];

  $sSuggestions = "";
  // Check for suggestions if $sInitial is not empty
  if ($sInitial !== "") {
    // Convert to lowercase to ignore the case.
    $sInitial = strtolower($sInitial);
    $sInitLength=strlen($sInitial);
    foreach($saBiblicalNames as $sName) {
      if (stristr($sInitial, substr($sName, 0, $sInitLength))) {
        if ($sSuggestions === "") {
          $sSuggestions = $sName;
        } else {
          $sSuggestions .= ", $sName";
        }
      }
    }
  }

  // Output "no suggestion" if no suggestion was found or the suggestions
  echo $sSuggestions === "" ? "no suggestion" : $sSuggestions;
} else {
$sClientCode = <<<CLIENT_CODE
  <html>
  <head>
  <script>
  function GetSuggestions(sInitial) {
    if (sInitial.length == 0) {
      document.getElementById("idSuggestion").innerHTML = "";
    } else {
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("idSuggestion").innerHTML = this.responseText;
        }
      };
      xmlhttp.open("GET", "XoaxGetSearchSuggestions.php?keyInitial=" + sInitial, true);
      xmlhttp.send();
    }
  }
  </script>
  </head>
  <body>
    <p><b>Type a few characters to get a suggestion below:</b></p>
    <form action="">
      <label for="idName">Name:</label>
      <input type="text" id="idName" name="fname" onkeyup="GetSuggestions(this.value)">
    </form>
    <p>Suggestions: <span id="idSuggestion"></span></p>
  </body>
</html>
CLIENT_CODE;
  echo $sClientCode;
}

?>