In this tutorial you will know how to create JQuery Autocomplete
Read The Full Tutorial.
In this tutorial you will know how to create JQuery Autocomplete
Here we will begin with javascript code:
JavaScript
<script src="jquery-1.2.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(thisValue) {
$('#inputString').val(thisValue);
$('#suggestions').hide();
}
</script>
Now for the PHP Backend (RPC.php)
As always my PHP Backend page is called rpc.php (Remote Procedure Call) not that it actually does that, but hey-ho.
<?
include("common.inc");
if(isset($_POST['queryString'])) {
$queryString = $_POST['queryString'];
if(strlen($queryString) >0) {
$query = "SELECT blog_tags FROM blog_entry WHERE blog_tags LIKE '$queryString%' LIMIT 10";
$result = mysql_query($query) or die("There is an error in database please contact support@ExploreMyBlog.Com");
while($row = mysql_fetch_array($result)){
echo '<li onClick="fill(''.$row[blog_tags].'');">'.$row[blog_tags].'</li>';
}
}
}
?>
Here is the CSS Styling:
<style type="text/css">
.suggestionsBox {
position: relative;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #212427;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #659CD8;
}
</style>
The CSS is pretty standard, nothing out of the ordinary.
Main HTML
<div>
<div>
Type your county (for the demo):
<input size="30" id="inputString" onkeyup="lookup(this.value);" type="text" />
</div> <div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
</div>
View demo http://www.exploremyblog.com/assets/images/uploads/jquery_autocomplete_with_php_mysql/jquery_autocomplete_with_php_mysql.html
|
Ajax Projects
