«

»

Jan 31

howto implement autocomplete in input text form using jQuery , jQueryUI and PHP

When you build a form, allowing autocomplete in input text is one of most  useful thing for yours users and for you. Now we will show you how  a combination of jQuery , jQueryUI and PHP can used to retrieve data from a database and showed to the user during typing in a input field.

autocomplete1 In the picture the result we want to obtain. First of all we build the HTML form in which the input text lives.
<form id=”newIngredients” action=”” method=”post”>
<p class=”input-text ui-widget”>
<label for=”nome-ingr-en”>Nome ( Inglese)</label><br />
<input type=”text” name=”nome-ingr-en” id=”nome-ingr-en” />
</p>
…….
</form>

To implement autocomplete we need to download jQueryUI and jQuery from download page and copy uncompressed files to our root page , next insert it in our page :

<link type=”text/css” href=”/css/ui-lightness/jquery-ui-1.8.17.custom.css” rel=”stylesheet” />
<script type=”text/javascript” src=”/js/jquery-1.7.1.min.js”></script>
<script type=”text/javascript” src=”/js/jquery-ui-1.8.17.custom.min.js”></script>

When you download it be care to choose autocomplete widget from widgets download section.

Now you need to write just few sentences of code, bind autocomplete jQueryUI function to our input text:

<script>
$(function() {
$( “#nome-ingr-en” ).autocomplete({
source: “search.php?table=ingredients&field=name”,
minLength: 2
});
});
</script>

In this code :

  • source : the page where we want to retrieve data from, we add a table and a field variable for more flexibility, we’ll show you later
  • minLenght : is the minum character lenght of the words, so we can avoid a lot of result

Autocomplete function for remote source accepts JSON data and we like this approach. It’s time to create our search.php

<?php
/**
* The db connection , it can look like
*mysql_connect(“localhost”,”myuser”,”mypassword”);
*mysql_select_db(“mydb”);
* or any other db functions like PDO
*/
include_once ‘dbconnection.php’;
/**
* Build array for later JSON Data
*/
function get_data($table,$field,$term) {
$array = array();
$query =”SELECT $field FROM $table WHERE $field LIKE ‘%$term%’ “;
$result = mysql_query($query);
$nr_row = mysql_num_rows($result);
if ($nr_row > 0) {
while ($row = mysql_fetch_array($result)) {
$array[]=array(‘id’=>’keyouchoose’,’label’=>$row[$field],’value’=>$row[$field]);
}
}else $array[]=array(‘id’=>’no-results’,’label’=>’No Data’,’value’=>’No Data’);
return $array;
}

//Inizialize

$json_array=array();
// Table
if(isset ($_GET[‘table’]))$table = $_GET[‘table’];
else $table=false;
// Field
if(isset ($_GET[‘field’]))$field = $_GET[‘field’];
else $table=false;

// Searching term , it is added by autocomplete function by default
if(isset ($_GET[‘term’]))$term = $_GET[‘term’];
else $term=false;
$json_array=get_data($table,$field,$term);
echo json_encode($json_array);
?>

All done! Try it typing some words into input text….don’t forget to have some data into db! The flexibility allows us to change table and field variable into js script and not modify our php file, so to attach an autocomplete functionality to another input just copy and paste the autocomplete code changing table and field. Note that it’s up to you implement security into the code.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>