Integrate jQuery Simple & Multi Textfield Autocomplete With CodeIgniter in 5 Minutes

Posted by & filed under Ajax, CodeIgniter, CSS, JQUERY, MYSQL, PHP.

In this tutorial we are going to integrate jQuery UI Autocomplete with CodeIgniter Framework using jQuery, Ajax and MySQL Database. I will start with scratch and go over advanced concepts of jQuery Autocomplete installation.

I have created two pages in CodeIgniter application.

  1. Simple jQuery Autocomplete search Integration with CodeIgniter using jQuery, Ajax and MySQL Database
  2. Multi textfield jQuery Autocomplete search Integration with CodeIgniter using jQuery, Ajax and MySQL Database.

 

 

how-to-integrate-jquery-autocomplete-with-codeigniter-php-mysql-ajax

 

Integrate jQuery UI Autocomplete with CodeIgniter Using jQuery, Ajax & MySQL:

I have started with fresh installation of CodeIgniter framework. And download required dependencies jQuery, jQuery UI, and put it into assets folder.

Next created Employees Controller, and added three pages in it. Also created views for the three page inside views and employees folder. Finally added Empoyee form in single.ctp file. Next selected employee_id text field and initialized jQuery autocomplete.


<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-6 offset-md-3">
            <h1>Simple jQuery Autocomplete in CodeIgniter</h1>
            <form> 
                <div class="form-group">
                    <label for="employee_id">Employee ID</label>
                    <input type="text" class="form-control" name="employee_id" id="employee_id" aria-describedby="employee_id" placeholder="Enter Employee ID">
                </div>
                <div class="form-group">
                    <label for="first_name">First Name</label>
                    <input type="text" class="form-control" name="first_name" id="first_name" placeholder="First Name">
                </div>
                <div class="form-group">
                    <label for="last_name">Last Name</label>
                    <input type="text" class="form-control" name="last_name" id="last_name" placeholder="Last Name">
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" class="form-control" name="email" id="email" placeholder="Email">
                </div>
                <div class="form-group">
                    <label for="designation">Designation</label>
                    <input type="text" class="form-control" name="designation" id="designation" placeholder="Designation">
                </div>
                <div class="form-group">
                    <label for="department">Department</label>
                    <input type="text" class="form-control" name="department" id="department" placeholder="Department">
                </div>
                <button class="btn btn-success btn-block">Submit</button>
            </form>
        </div>
    </div>
</div>

<!-- Our Custom JS Script - Keep Last -->
<script src="<?php echo base_url('assets/js/app.js'); ?>"></script>

$(document).ready(function(){
    var basePath = $("#base_path").val();
    $("#employee_id").autocomplete({
        source: function(request, cb){
            console.log(request);
            
            $.ajax({
                url: basePath+'get-employess/'+request.term,
                method: 'GET',
                dataType: 'json',
                success: function(res){
                    var result;
                    result = [
                        {
                            label: 'There is no matching record found for '+request.term,
                            value: ''
                        }
                    ];

                    console.log("Before format", res);
                    

                    if (res.length) {
                        result = $.map(res, function(obj){
                            return {
                                label: obj.id,
                                value: obj.id,
                                data : obj
                            };
                        });
                    }

                    console.log("formatted response", result);
                    cb(result);
                }
            });
        },
        select: function( event, selectedData ) {
            console.log(selectedData);

            if (selectedData && selectedData.item && selectedData.item.data){
                var data = selectedData.item.data;

                $('#first_name').val(data.first_name);
                $('#last_name').val(data.last_name);
                $('#email').val(data.email);
                $('#designation').val(data.designationsName);
                $('#department').val(data.deptName);
            }
            
        }  
    });  
});


Integrate Multi Textfield Autocomplete with CodeIgniter Using Ajax & MySQL in 5 Minutes:

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni2explore[at]gmail.com

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!