How to implement jquery ui autocomplete search or textbox search with Database in codeigniter with example. In this Codeigniter tutorial, We will share with you how to implement an autocomplete search or textbox search with database using jquery ui example.
Today we will implement jquery ui autocomplete search simple and easy way. Just follow the few steps and implement autocomplete search in your codeigniter Application.
In this Codeigniter autocomplete search tutorial, we would love to share things step by step from scratch. We will use the jQuery ui for auto-complete search from datatabase, it is a library. Also we provide a live demo end of the tutorial.
Codeigniter jQuery ui Autocomplete Search with Ajax
- Download Codeigniter Latest
- Basic Configurations
- Create Database With Table
- Setup Database Credentials
- Make New Controller
- Create Views
- Start Development server
- Conclusion
Download Codeigniter Project
In this step we will download the latest version of Codeigniter, Go to this link Download Codeigniter. Download the fresh setup of codeigniter and unzip the setup in your local system xampp/htdocs/ and also rename your project folder name to demo.
Basic Configurations
Next we will set the some basic configuration on config.php file, so let’s go to application/config/config.php and open this file on text editor.
Set Base URL like this
$config['base_url'] = 'http://localhost/demo';
Create Database With Table
In this step, we need to create database name demo, so let’s open your phpmyadmin and create the database with the name demo . After successfully create a database, you can use the below sql query for creating a table in your database.
CREATE TABLE IF NOT EXISTS users(
id int(10) unsigned NOT NULL AUTO_INCREMENT,
name varchar(255) COLLATE utf8_unicode_ci NOT NULL,
email varchar(255) COLLATE utf8_unicode_ci NOT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=16 ;
Setup Database Credentials
Nowwe need to connect this project to database, So go to application/config/ and open database.php file and set the datatabase credential.
$db['default'] = array( 'dsn' => '', 'hostname' => 'localhost', 'username' => 'root', 'password' => '', 'database' => 'demo', 'dbdriver' => 'mysqli', 'dbprefix' => '', 'pconnect' => FALSE, 'db_debug' => (ENVIRONMENT !== 'production'), 'cache_on' => FALSE, 'cachedir' => '', 'char_set' => 'utf8', 'dbcollat' => 'utf8_general_ci', 'swap_pre' => '', 'encrypt' => FALSE, 'compress' => FALSE, 'stricton' => FALSE, 'failover' => array(), 'save_queries' => TRUE );
Make Controller
Now we need to create a controller name Ajax.php. In this controller we will create some method/function name autocomplete() and search() for showing and searching a data from datatabse.
<?php
class Ajax extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->helper('url_helper');
$this->load->helper('form');
$this->load->database();
}
public function autocomplete(){
$this->load->view('jquery-ui-autocomplete');
}
public function search(){
$term = $this->input->get('term');
$this->db->like('name', $term);
$data = $this->db->get("users")->result();
echo json_encode( $data);
}
}
Create Views
Now we need to create view for showing autocomplete search bar, so go to application/views/ and here create one view name jquery-ui-autocomplete. After create this view put the below html in view.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Auto Complete Search Using Jquery UI - Tutsmake.com</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.container{
padding: 10%;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12"><h2>Codeigniter 3 Auto Complete Search Using Jquery UI</h2></div>
<div class="col-12">
<div id="custom-search-input">
<div class="input-group">
<input id="search" name="search" type="text" class="form-control" placeholder="Search" />
</div>
</div>
</div>
</div>
</div>
<script>
var BASE_URL = "<?php echo base_url(); ?>";
$(document).ready(function() {
$( "#search" ).autocomplete({
source: function(request, response) {
$.ajax({
url: BASE_URL + "ajax/search",
data: {
term : request.term
},
dataType: "json",
success: function(data){
var resp = $.map(data,function(obj){
return obj.name;
});
response(resp);
}
});
},
minLength: 1
});
});
</script>
</body>
</html>
Start Development server
For start development server, Go to the browser and hit below the url.
http://localhost/demo/ajax/autocomplete
Conclusion
In this codeigniter autocomplete search tutorial – We have successfully create autocomplete search from datatabase using the jQuery ui library,
If you have any questions or thoughts to share, use the comment form below to reach us.
thanks for sharing