Home Tutorial Ajax Jquery jQuery autocomplete

 
 

Share on Google+Share on Google+
jQuery autocomplete
Posted on: December 2, 2009 at 12:00 AM
Advertisement
Autocomplete is a common feature available in lot of web tools and services now a days. We see many of websites uses this feature of jquery. This example shows A function for making autocomplete text box with the help of jquery plugin and php/mysql .

jQuery Autocomplete :

Autocomplete is a common feature available in lot of web tools and services now a days. We see many of websites uses this feature of jquery.

This example shows A function for making autocomplete text box with the help of jquery plugin and php/mysql .

In this example when we press the name of any country then the related country name displayed below the text box .If we press wrong country name then the no country name will be displayed and when we click the correct country name keyword then the related countries are displayed below the text box from database. With the help of this example we can make auto complete box for many type of development uses.

In this example we use the css inside the index.html page from where we do all css work and for programming use we use php page as rpc.php in which we done the mysql connection and query work to search all specified country name.

Complete code:

Step 1: index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery Auto Complete</title>

<script type="text/javascript" src="../plugin/jquery.js"></script>

<script type="text/javascript">

function lookup(inputString) {

if(inputString.length == 0) {

$('#suggestions').hide();

} else {

$.post("rpc.php", {queryString: ""+inputString+""}, function(data){

if(data.length >0) {

$('#suggestions').show();

$('#autoSuggestionsList').html(data);

}

});

}

}

function fill(thisValue) {

$('#inputString').val(thisValue);

setTimeout("$('#suggestions').hide();", 200);

}

</script>

<style type="text/css">

body {

font-family: Helvetica;

font-size: 13px;

color: #000;

}

h3 {

margin: 0px;

padding: 0px;

}

.suggestionsBox {

position: relative;

left: 0px;

margin: 0px 0px 0px 0px;

width: 200px;

background-color: #7845DD;

-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: #DD45CD;

}

</style>

</head>

<body>

<div>

<form>

<div>

<br />

<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />

</div>

<div class="suggestionsBox" id="suggestions" style="display: none;">

<div class="suggestionList" id="autoSuggestionsList">

</div>

</div>

</form>

</div>

</body>

</html>

Step 2:

<?php

$db = new mysqli('localhost', 'root' ,'', 'country');

if(!$db) {

echo 'ERROR: Could not connect to the database.';

} else {

if(isset($_POST['queryString'])) {

$queryString = $db->real_escape_string($_POST['queryString']);

if(strlen($queryString) >0) {

$query = $db->query("SELECT value FROM countries WHERE value LIKE '$queryString%' LIMIT 10");

if($query) {

while ($result = $query ->fetch_object()) {

echo '<li onClick="fill(\''.$result->value.'\');">'.$result->value.'</li>';

}

} else {

echo 'ERROR: There was a problem with the query.';

}

} else {

}

} else {

echo 'There should be no direct access to this script!';

}

}

?>

online demo: Auto complete Example
Advertisement

Related Tags for jQuery autocomplete:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: December 2, 2009

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com