<?php
require_once "../../class.pAjax.php";
function suggestStates($text) {
// It could be an SQL statement execution with a like condition, example:
// SELECT stateName FROM USAStates WHERE stateName LIKE '{$text}%';
$database = array(
"Alabama", "Alaska", "Arizona", "Arkansas",
"California", "Colorado", "Connecticut",
"Delaware", "Florida", "Georgia", "Hawaii",
"Idaho", "Illinois", "Indiana", "Iowa",
"Kansas", "Kentucky", "Lousiana",
"Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota",
"Mississippi", "Missouri", "Montana",
"Nebraska", "Nevada", "New Hampshire", "New Jersey", "New Mexico",
"New York", "North Carolina", "North Dakota",
"Ohio", "Oklahoma", "Oregon",
"Pennsylvania", "Rhode Island", "South Carolina", "South Dakota",
"Tennessee", "Texas", "Utah", "Vermont", "Virginia",
"Washington", "West Virginia", "Wisconsin", "Wyoming"
);
return suggestions($text, $database);
}
function suggestColors($text) {
$database = array(
"AliceBlue", "AntigueWhile", "Aqua", "Aquamarine", "Azure",
"Beige", "Bisque", "Black", "BlanchedAlmond", "Blue", "BlueViolet", "Brown", "BurlyWood",
"CadetBlue", "Chartreuse", "Chocolate", "Coral", "CornflowerBlue", "Cornsilk", "Crimson", "Cyan",
"DarkBlue", "DarkCyan", "DarkGoldenRod", "DarkGray", "DarkKhaki", "DarkMagenta", "DarkOliveGreen",
"DarkOrange", "DarkOrchid", "DarkRed", "DarkSalmon", "DarkSeaGreen", "DarkSlateBlue", "DarkSlateGray",
"DarkTurquoise", "DarkViolet", "DeepPink", "DeepSkyBlue", "DimGray", "DodgerBlue",
"Feldspar", "FireBrick", "FloralWhite", "ForestGreen", "Fuchsia",
"Gainsboro", "GhostWhite", "Gold", "GoldenRod", "Gray", "Green", "GreenYellow",
"HoneyDew", "HotPink", "IndianRed", "Indigo", "Ivory", "Khaki",
"Lavender", "LavenderBlush", "LawnGreen", "LemonChiffon", "LightBlue", "LightCoral",
"LightCyan", "LightGoldenRodYellow", "LightGray", "LightGreen", "LightGreen", "LightPink",
"LightSalmon", "LightSeaGreen", "LightSkyBlue", "LightSlateBlue", "LightSlateGray",
"LightSteelBlue", "LightYellow", "Lime", "LimeGreen", "Linen",
"Magenta", "Maroon", "MediumAquaMarine", "MediumBlue", "MediumOrchid", "MediumPurple",
"MediumSeaGreen", "MediumSlateBlue", "MediumSpringGreen", "MediumTurquoise", "MediumVioletRed",
"MidnightBlue", "MintCream", "MistyRose", "Moccasin",
"NavajoWhite", "Navy", "OldLace", "Olive", "OliveDrab", "Orange", "OrangeRed", "Orchid",
"PaleGoldenRod", "PaleGreen", "PaleTurquoise", "PaleVioletRed", "PapayaWhip", "PeachPuff",
"Peru", "Pink", "Plum", "PowderBlue", "Purple", "Red", "RosyBrown", "RoyalBlue",
"SaddleBrown", "Salmon", "SandyBrown", "SeaGreen", "SeaShell", "Sienna", "Silver",
"SkyBlue", "SlateBlue", "SlateGray", "Snow", "SpringGreen", "SteelBlue",
"Tan", "Teal", "Thistle", "Tomato", "Turquoise", "Violet", "VioletRed",
"Wheat", "White", "WhiteSmoke", "Yellow", "YellowGreen"
);
return suggestions($text, $database);
}
function suggestions($text, $database) {
$return = array();
for ($i = 0; $i < count($database); $i++) {
if (strtolower($text) == strtolower(substr($database[$i], 0, strlen($text))))
$return[] = $database[$i];
}
return $return;
}
$AJAX = new pAjax;
$AJAX->handleRequest();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Auto Suggestion Type Ahead Example</title>
<link href="suggestions.css" type="text/css" rel="stylesheet" />
<?php $AJAX->showJavaScript("../.."); ?>
<script type="text/javascript" src="autosuggestcontroller.js"></script>
<script type="text/javascript" src="statessuggestionprovider.js"></script>
<script type="text/javascript" src="colorssuggestionprovider.js"></script>
<script type="text/javascript">
window.onload = function () {
var oTextBox1 = new AutoSuggestController(document.getElementById("TextBox1"), new StatesSuggestionProvider());
var oTextBox2 = new AutoSuggestController(document.getElementById("TextBox2"), new ColorsSuggestionProvider());
}
</script>
</head>
<body>
<h1>Auto Suggestion with Drop-down</h1>
<p>
While you type anything on the input, it processes and autosuggest you by completing and selecting the word and displaying a drop down to allow selection<br />
The database of this example are the USA states. Try typing something like "New Mexico" and see what it appears while you type a char.
</p>
USA States: <input type="text" id="TextBox1" /><br />
<br /><br /><br />
<p>
The database of this other example are the HTML colors, and only display suggestions if length is > 2 (check "colorssuggestionprovider.js").
</p>
HTML Colors: <input type="text" id="TextBox2" /><br />
</body>
</html>
|
Download
