jQuery autocomplete


 

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 .

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);

}

0

</script>

<style type="text/css">

body {

1

font-family: Helvetica;

font-size: 13px;

color: #000;

2

}

h3 {

margin: 0px;

3

padding: 0px;

}

.suggestionsBox {

4

position: relative;

left: 0px;

margin: 0px 0px 0px 0px;

5

width: 200px;

background-color: #7845DD;

-moz-border-radius: 7px;

6

-webkit-border-radius: 7px;

border: 2px solid #000;

color: #fff;

7

}

.suggestionList {

margin: 0px;

8

padding: 0px;

}

.suggestionList li {

9

 

margin: 0px 0px 3px 0px;

padding: 3px;

0

cursor: pointer;

}

.suggestionList li:hover {

1

background-color: #DD45CD;

}

</style>

2

</head>

<body>

<div>

3

<form>

<div>

<br />

4

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

</div>

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

5

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

</div>

</div>

6

</form>

</div>

</body>

7

</html>

Step 2:

<?php

8

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

if(!$db) {

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

9

} else {

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

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

0

if(strlen($queryString) >0) {

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

if($query) {

1

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

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

}

2

} else {

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

}

3

} else {

}

} else {

4

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

}

}

5

?>

online demo: Auto complete Example

Ads