Codeigniter Autocomplete From Database

Today, We want to share with you codeigniter autocomplete from database.In this post we will show you ajax search in codeigniter demo, hear for jquery ui autocomplete in codeigniter with database we will give you demo and example for implement.In this post, we will learn about CodeIgniter Autocomplete Multiple Input Textbox With Database with an example.

PHP Codeigniter 3 – Jquery Ajax Autocomplete Search using Typeahead

Contents

Step 1: Create Table

tags table

CREATE TABLE IF NOT EXISTS `tags` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `slug` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
  `meta_keyword` text COLLATE utf8_unicode_ci NOT NULL,
  `meta_description` text COLLATE utf8_unicode_ci NOT NULL,
  `created_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',
  `updated_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=533 ;

Step 2: Make database configuration

application/config/database.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');


$active_group = 'default';
$query_builder = TRUE;


$db['default'] = array(
	'dsn'	=> '',
	'hostname' => 'localhost',
	'username' => 'main8754_988',
	'password' => '@#hjdfjhf$$%^&&**%^^',
	'database' => 'pakainfo',
	'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
);

Step 3: Add Route

application/config/routes.php

$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;


$route['ajax-view'] = 'welcome/index';
$route['ajaxpro'] = 'welcome/dashBoard';

Step 4: Create Controller

application/controllers/Welcome.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');


class Welcome extends CI_Controller {


    /**
    * Constructor of Controller
    *
    * @return Response
   */
    public function __construct() {
        parent::__construct();
        $this->load->database();
    }


    /**
    * Create from display view
    *
    * @return Response
   */
    public function index()
    {
        $this->load->view('profiles');
    }


    /**
    * response of ajax json
    *
    * @return Response
   */
    public function dashBoard()
    {
        $query = $this->input->get('query');
        $this->db->like('name', $query);


        $data = $this->db->get("tags")->result();


        echo json_encode( $data);
    }
}

Free Live Chat for Any Issue

Step 5: Create View File

application/views/profiles.php

<html lang="en">
<head>
    <title>Codeigniter 3 - jquery ajax autocomplete search using typeahead example- www.pakainfo.com</title>  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>  
</head>
<body>


<div class="container">
    <h1>Codeigniter 3 - jquery ajax autocomplete search using typeahead example- www.pakainfo.com</h1>
    <input class="typeahead form-control" type="text">
</div>


<script type="text/javascript">
    $('input.typeahead').typeahead({
        source:  function (query, process) {
        return $.get('/ajaxpro', { query: query }, function (data) {
                console.log(data);
                data = $.parseJSON(data);
                return process(data);
            });
        }
    });
</script>


</body>
</html>

I hope you get an idea about Autocomplete in Codeigniter using Typeahead.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Pakainfo

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Also Read This 👉 CodeIgniter Autocomplete Multiple input textbox with Database