How to Autocomplete Textbox Using jQuery, Codeigniter, and MySQL

In this tutorial, I will show you how to autocomplete search from database using Codeigniter and jquery plugin. We are going to pull in live search thing something similar to Google search. As soon as you start typing in the textbox, the related suggestions will appear from the database

Steps For How to Autocomplete Textbox Using jQuery, Codeigniter and MySQL

Step 1. jQuery Plugin

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://scripts.guru/front/js/jquery-ui.css" rel="Stylesheet"></link>
<script src="https://scripts.guru/front/js/jquery-ui.js"></script>   

Step 2. Create HTML Form

<form action="<?=base_url()?>search" method="get">
    <input name="keyword" type="text"  id="txtinput" >
</form>

Step 3. autocomplete jQuery Plugin Code

In this step ajax call in controller and you are receive json response autocomplete jquery plugin set receive response like google search.

<script type="text/javascript">
    $(document).ready(function () {
        $('#txtinput').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "<?= base_url() ?>Frontcontroller/SearchResult",
                    data: { term: request.term},
                    dataType: "json",
                    success: function (data) {

                        response($.map(data, function (item) {
                            return {
                                value: item.label,
                            };
                        }))
                    }
                })
            },
            focus: function() {
             return false;
            },
            select: function (event, ui) {
                return false;
            }
        }).data("ui-autocomplete")._renderItem = function (ul, item) {
             var  inner_html = '';
             inner_html = '<a>'+item.label + '</a><hr style="margin-top: 0px;margin-bottom: 0px;">';
            return $("<li></li>")
                    .data("ui-autocomplete-item", item)
                    .append(inner_html)
                    .appendTo(ul);
        };
    });
</script>

Step 4. Controller Code (SearchResult function)

In this step controller call in model and model set like query in database you are receive record and create array in controller.

public function SearchResult() 
{
    $this->load->model('brand_model');
    $term = $this->input->get('term');
    $getDetail = $this->brand_model->getSearch($term);
    $data = array();
    foreach ($getDetail as $value) {
        $data[] = array(
            'label' => $value['name'],
            'value' => $value['name']);
    }
    echo json_encode($data);
}

Step 5. Model Code (getSearch function)

function getsearchresult($name)
{   
    $select = $this->db->query("SELECT * FROM brands WHERE name LIKE '%".$name."%' ");
    return $select->result_array();
}

And if you like this tutorials please share it with your friends via Email or Social Media.