<script type="text/javascript">
var nameArray = null;
</script>
Okay, we now have the HTML essentials as far as the text and suggestion-list boxes are concerned. Now we need to add functionality to these elements. When the user begins typing, we want the suggestions box to display and the user's input to show in the text-box. For instance, when a user types in the letter 's', we want the suggestions box to show all values from our table that begin with the letter 's'.
function doSuggestionBox(text) { // function that takes the text box's inputted text as an argument
var input = text; // store inputed text as a variable for later manipulation
// determine whether to display suggestion box or not
if (input == "") { // hide the suggestion box
document.getElementById('divSuggestions').style.visibility = 'hidden';
} else { // show the suggestion box
document.getElementById('divSuggestions').style.visibility = 'visible';
doSuggestions(text);
}
}
function doSelection(text) { // function that grabs the selected suggestion and hides the suggestions box and places the selected suggestion in the text box
var selection = text;
document.getElementById('divSuggestions').style.visibility = 'hidden'; // hides the suggestion box
document.getElementById("txtSearch").value = selection; // sets the text in the textbox to the selected suggestion
}
function changeBG(obj) { // when the mouse hovers over a suggestion, the suggestion is highlighted
element = document.getElementById(obj);
oldColor = element.style.backgroundColor;
if (oldColor == "purple" || oldColor == "") {
element.style.background = "white";
element.style.color = "purple";
element.style.cursor = "pointer";
} else {
element.style.background = "purple";
element.style.color = "white";
element.style.cursor = "default";
}
}
function doSuggestions(text) { // actually displays the relevant suggestions in the suggestions box
var input = text;
var inputLength = input.toString().length;
var code = "";
var counter = 0;
// loop through our array of values to determine which ones are matching suggestions
while( counter < this.nameArray.length) {
var x = this.nameArray[counter]; // avoids retyping this code a bunch of times
// if statement that determines if the inputed text matches the value from our list of
// values - if true, adds the suggestion to the list
if(x.substr(0, inputLength).toLowerCase() == input.toLowerCase()) {
// The relative suggestion is a div that we'll place into the suggestions box. You can see
// how we're implementing a couple of the previous functions we created previously.
code += "<div id='" + x + "'onmouseover='changeBG(this.id);' onMouseOut='changeBG(this.id);' onclick='doSelection(this.innerHTML)'>" + x + "</div>";
}
counter += 1;
}
if (code == "") {
document.getElementById('divSuggestions').style.visibility='hidden';
}
document.getElementById('divSuggestions').innerHTML = code; // adds the suggestions to the suggestions box
document.getElementById('divSuggestions').style.overflow='auto'; // shows a vertical scroll bar if needed
}
mysql_connect("your database server", "username", "password") OR DIE ('Unable to connect to database! Please try again later.');
mysql_select_db('your database name');
$query = 'SELECT user_lname, user_fname FROM user ORDER BY user_lname ASC';
$result = mysql_query($query);
$counter = 0;
// write the values from the database into the javascript array
echo("<script type='text/javascript'>");
echo("this.styleListArray = new Array();");
if ($result) {
while($row = mysql_fetch_array($result)) {
echo("this.nameArray[" . $counter . "] = '" . $row['user_lname'] . ", " . $row['user_fname'] . "';"); // displays 'lname, fname'
$counter += 1;
}
}
echo("</script>");
<body onclick="document.getElementById('divSuggestions').style.visibility='hidden'">
onkeyup="doSuggestionBox(this.value);"
That's it. Now you have a working Google-like suggestions box. My source code is attached. Of course you can add more features and functionality as seen fit.
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (4)
Commented:
Author
Commented:-Cheers
Author
Commented:Commented:
There is best example here: "http://jqueryui.com/autocomplete/".
Using jquery can make this possible.