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

Posted 11:26 am by muni & 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.

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: