The Autocomplete textbox helps users to find and select the value from pre-populated values list. It provides suggestions while user type in the input field. Generally, the autocomplete textbox is used for search input field where the user allows to input the pre-stored data. Using jQuery UI, you can easily implement an autocomplete textbox on the website. The jQuery UI Autocomplete plugin<\/b> is an instant way to add autocomplete feature to the input text field. This plugin converts the input fields into an autocomplete that receives input from the user. When typing in the autocomplete field, this plugin start searching for values that match and list them to choose from.<\/p>\n
In the web application, autocomplete textbox populate the suggestions from the database and allow the user to select. Like PHP you can easily add jQuery UI autocomplete in CodeIgniter<\/b> with MySQL database. In this tutorial, we will show you how to add autocomplete feature to textbox in CodeIgniter using jQuery UI.<\/p>\n
The example code will demonstrate the autocomplete functionality by adding the skills autocomplete search textbox in CodeIgniter.<\/p>\n
To store the skills data you need to create a table in the database. The following SQL creates a The Skills controller has 3 functions, The skills<\/code> table with some basic fields in the MySQL database.<\/p>\nCREATE<\/span> TABLE<\/span> `skills<\/span>` (\r\n `id`<\/span> int<\/span>(11<\/span>) NOT NULL<\/span> AUTO_INCREMENT,\r\n `skill`<\/span> varchar<\/span>(255<\/span>) COLLATE utf8_unicode_ci NOT NULL<\/span>,\r\n `status`<\/span> enum('1'<\/span>,'0'<\/span>) COLLATE utf8_unicode_ci NOT NULL<\/span> DEFAULT '1'<\/span>,\r\n PRIMARY KEY<\/span> (`id`<\/span>)\r\n) ENGINE=<\/span>InnoDB DEFAULT CHARSET=<\/span>utf8 COLLATE=<\/span>utf8_unicode_ci;\r\n<\/pre>\nController (Skills.php)<\/h2>\n
__construct()<\/code>, index()<\/code>, and autocompleteData()<\/code>.<\/p>\n\n
\n
<?php defined<\/span>(<\/span>'BASEPATH'<\/span>) OR exit(<\/span>'No direct script access allowed'<\/span>);
class <\/span>Skills <\/span>extends <\/span>CI_Controller
<\/span>{
function <\/span>__construct<\/span>() {
<\/span>parent<\/span>::<\/span>__construct<\/span>();
<\/span>\/\/ Load skill model
<\/span>$this<\/span>-><\/span>load<\/span>-><\/span>model<\/span>(<\/span>'skill'<\/span>);
}
public function <\/span>index<\/span>(){
<\/span>\/\/ Load the view
<\/span>$this<\/span>-><\/span>load<\/span>-><\/span>view<\/span>(<\/span>'skills\/index'<\/span>);
}
function <\/span>autocompleteData<\/span>() {
<\/span>$returnData <\/span>= array();
<\/span>\/\/ Get skills data
<\/span>$conditions<\/span>[<\/span>'searchTerm'<\/span>] = <\/span>$this<\/span>-><\/span>input<\/span>-><\/span>get<\/span>(<\/span>'term'<\/span>);
<\/span>$conditions<\/span>[<\/span>'conditions'<\/span>][<\/span>'status'<\/span>] = <\/span>'1'<\/span>;
<\/span>$skillData <\/span>= <\/span>$this<\/span>-><\/span>skill<\/span>-><\/span>getRows<\/span>(<\/span>$conditions<\/span>);
<\/span>\/\/ Generate array
<\/span>if(!empty(<\/span>$skillData<\/span>)){
foreach (<\/span>$skillData <\/span>as <\/span>$row<\/span>){
<\/span>$data<\/span>[<\/span>'id'<\/span>] = <\/span>$row<\/span>[<\/span>'id'<\/span>];
<\/span>$data<\/span>[<\/span>'value'<\/span>] = <\/span>$row<\/span>[<\/span>'skill'<\/span>];
<\/span>array_push<\/span>(<\/span>$returnData<\/span>, <\/span>$data<\/span>);
}
}
<\/span>\/\/ Return results as json encoded array
<\/span>echo <\/span>json_encode<\/span>(<\/span>$returnData<\/span>);die;
}
}<\/span><\/pre>\nModel (Skill.php)<\/h2>\n
getRows()<\/code> function of Skill model, fetch the data from skills<\/code> table based on the conditions and returns data as an array.<\/p>\n<?php <\/span>if (!<\/span>defined<\/span>(<\/span>'BASEPATH'<\/span>)) exit(<\/span>'No direct script access allowed'<\/span>);
class <\/span>Skill <\/span>extends <\/span>CI_Model<\/span>{
function <\/span>__construct<\/span>() {
<\/span>$this<\/span>-><\/span>dbTbl <\/span>= <\/span>'skills'<\/span>;
}
<\/span>\/*
* Get rows from the skills table
*\/
<\/span>function <\/span>getRows<\/span>(<\/span>$params <\/span>= array()){
<\/span>$this<\/span>-><\/span>db<\/span>-><\/span>select<\/span>(<\/span>\"*\"<\/span>);
<\/span>$this<\/span>-><\/span>db<\/span>-><\/span>from<\/span>(<\/span>$this<\/span>-><\/span>dbTbl<\/span>);
<\/span>\/\/fetch data by conditions
<\/span>if(<\/span>array_key_exists<\/span>(<\/span>\"conditions\"<\/span>,<\/span>$params<\/span>)){
foreach (<\/span>$params<\/span>[<\/span>'conditions'<\/span>] as <\/span>$key <\/span>=> <\/span>$value<\/span>) {
<\/span>$this<\/span>-><\/span>db<\/span>-><\/span>where<\/span>(<\/span>$key<\/span>,<\/span>$value<\/span>);
}
}
<\/span>\/\/search by terms
<\/span>if(!empty(<\/span>$params<\/span>[<\/span>'searchTerm'<\/span>])){
<\/span>$this<\/span>-><\/span>db<\/span>-><\/span>like<\/span>(<\/span>'skill'<\/span>, <\/span>$params<\/span>[<\/span>'searchTerm'<\/span>]);
}
<\/span>$this<\/span>-><\/span>db<\/span>-><\/span>order_by<\/span>(<\/span>'skill'<\/span>, <\/span>'asc'<\/span>);
if(<\/span>array_key_exists<\/span>(<\/span>\"id\"<\/span>,<\/span>$params<\/span>)){
<\/span>$this<\/span>