Examples – PHP Autocomplete

Introduction

phpcontrols — Fri, 31 Jan 2014 01:07:35 +0000

Auto-complete sometimes is called auto-suggest because it allows users to quickly find and select from a pre-populated list of values as they type without the user actually typing it in completely.

Thought it is an extremely popular feature, creating it by hand involves extensive client-side javascript and server-side script programming. PHP Autocomplete addresses the issues by making it easy for PHP developers with simple APIs, minimize any custom Javascript that ultimately shortens its programming time.

Your First Autcomplete

phpcontrols — Mon, 03 Feb 2014 23:57:30 +0000

In conf.php, simply set PAC_PATH representing the relative or absolute URL to the PHP Autocomplete library.

Assuming phpAutocomplete folder is inside the web root:

define('PAC_PATH','/phpAutocomplete/');

Then include conf.php in on top of the every page.

require_once("../conf.php");

All PHP Autocomplete code will require minimum two lines of PHP code.

$pac = new C_PhpAutocomplete('company');
$pac -> display('SELECT');

The first line is to create our PHP Autocomplete object by calling the constructor;
- the 1st parameter is the unique ID to an existing Select tag
The second line is to call display method to render control on the screen.

The complete code:

require_once("../conf.php");
?>
DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP Autocomplete Introtitle>
head>
<body>

$pac = new C_PhpAutocomplete('company');
$pac -> display();
?>

<select id="company">
<option>option>
<option id="1">Appleoption>
<option id="2">Googleoption>
<option id="3">Microsoftoption>
<option id="4">Facebookoption>
<option id="5">Twitteroption>
select>

body>
html>

Result:
PHP Autocomplete supports searching and filtering out of the box.

SELECT or INPUT?

phpcontrols — Tue, 04 Feb 2014 00:03:03 +0000

The PHP Autocomplete can be attached an existing HTML Select or an hidden input field.When attached to a Select tag, pass “SELECT” to display() method; or “INPUT” when attached to a hidden Input field. The default value value is “INPUT” when left it blank. e.g.

$pac -> display("SELECT");

So when to use SELECT or INPUT? If you want to transform an existing HTML Select tag into auto-complete control, use “SELECT”; otherwise, use “INPUT” referencing to an input type=’hidden’ tag. In order to take advantage of custom data, use “INPUT”, otherwise data is parsed from Select’s option tags.

$data =
array(
array('id'=>1, 'text'=>'Japan'),
array('id'=>2, 'text'=>'USA'),
array('id'=>3, 'text'=>'Hong Kong'),
array('id'=>4, 'text'=>'Canada'),
array('id'=>5, 'text'=>'Brazil')
);
$pac = new C_PhpAutocomplete('country', $data);
$pac -> display();
?>
<input type="hidden" id="country">

Under the Hood

phpcontrols — Tue, 04 Feb 2014 00:03:40 +0000

PHP Autocomplete use jQuery Select2 library as the choice of weapon. The Select tag is essentially transforms into combination of hidden Input and and Ul tags. The implication is that you cannot no longer use Select related jQuery method. For example to empty a selection instead of using

$("#state").val();

use

$("#state").select2("val", null);

Multiple Selection

phpcontrols — Tue, 04 Feb 2014 00:05:09 +0000

By default, PHP Autocomplete allows selection of a single value. To select multiple values, call enable_multiple() method and pass true.

Note that When attached to a multiple attribute will be used instead.

$pac = new C_PhpAutocomplete('country');
$pac -> enable_multiple(true); // will be ignored
$pac -> display('SELECT');
?>
<select id="country" multiple>
<option id="1">Japanoption>
<option id="2">USAoption>
<option id="3">Hong Kongoption>
<option id="4">Canadaoption>
<option id="5">Braziloption>
select>

Combo Box

phpcontrols — Tue, 04 Feb 2014 00:06:37 +0000

PHP Autocomplete has combo box built-in. Combo box is a combination of drop-down list and text box. Users can either type a value directly into the text box or choose from a list of existing options.

Combo box feature is not enabled by default. To enable combobox, call enable_combobox() and set parameter to true. Note that the $data definition has the same definition as the previous examples.

$pac_cb = new C_PhpAutocomplete('combobox', $data);
$pac_cb->enable_combobox(true);
$pac_cb->display();
?>
<input id="combobox" type="hidden" />

Placeholder Text

phpcontrols — Tue, 04 Feb 2014 00:07:00 +0000

A placeholder is the displaying text when no value has not set. Simply call set_placeholder() method to set the placeholder text. When placeholder is used for a non-multi-value select box, it requires that you include an empty tag as your first option.

Optionally, a clear button (visible once a selection is made) is available to reset the select box back to the placeholder value.

$pac = new C_PhpAutocomplete('country', $data);
$pac -> set_placeholder('Choose a country name:');
$pac -> display();
?>
<input type="hidden" id="country">

Minimum Input Characters

phpcontrols — Tue, 04 Feb 2014 00:07:43 +0000

You can restrict number of input minimum characters required to start a search by calling set_min_input_length() method.

$pac = new C_PhpAutocomplete('country', $data);
$pac -> set_placeholder('Choose a country name:');
$pac -> set_min_input_length(3);
$pac -> display();
?>
<input type="hidden" id="country">

Tagging Support

phpcontrols — Tue, 04 Feb 2014 00:08:40 +0000

PHP Autocomplete supports ability to add choices automatically as the user is typing into the search field known as “tagging”. Tags are the simplest form of data where the id is also the text. This is especially convenient in the tagging use case where the user can quickly enter a number of tags by separating them with token separators.

$pac_tag = new C_PhpAutocomplete('tags');
$pac_tag -> set_tags(array("red", "green", "blue", "orange", "white", "black", "purple", "cyan", "teal"), array(","," "));
$pac_tag -> display();
?>
<input id="tags" type="hidden" />

The second parameter is the token separators e.g. array(“,”, ” “). In above example, either a space or a comma will separate a string multiple tags. Try typing in the search field below and entering a space or a comma.

Loading Remote Data via AJAX/JSONP

phpcontrols — Tue, 04 Feb 2014 00:09:25 +0000

PHP Autocomplete supports loading remote data on the same or difference domain through AJAX. The remote data must be in JSONP format. JSONP is “JSON with padding“, a JSON derivative, used to retrieve JSON across domains.

Select2 has excellent remote data support. PHP Autocomplete goes one step further to make the routine even easier to implement with load_remote_data() method. The method take one parameter that is the URL to the JSONP remote data. As easy as pie. The URL can be either from a local or a remote domain.

$pac = new C_PhpAutocomplete('remote_data');
$pac -> load_remote_data('http://example.com/phpAutocomplete/examples/sample_remote_data.php');
$pac -> set_placeholder('Enter name');
$pac -> display();
?>

File (Remote sample data) must be the following JSONP format.

[ {"id": "1", "text": "BOBA FETT"},{"id": "2", "text": "R2D2"},{"id": "3", "text": "JAR JAR BINKS"} ]