CodeIgniter jQuery Ajax live search

View file –

<div class="something">
     <input name="search_data" id="search_data" type="text" onkeyup="ajaxSearch();">
     <div id="suggestions">
         <div id="autoSuggestionsList"></div>
     </div>
</div>

Javascript Code –

<script type="text/javascript">

function ajaxSearch()
{
    var input_data = $('#search_data').val();

    if (input_data.length === 0)
    {
        $('#suggestions').hide();
    }
    else
    {

        var post_data = {
            'search_data': input_data,
            '<?php echo $this->security->get_csrf_token_name(); ?>': '<?php echo $this->security->get_csrf_hash(); ?>'
            };

        $.ajax({
            type: "POST",
            url: "<?php echo base_url(); ?>welcome/autocomplete/",
            data: post_data,
            success: function (data) {
                // return success
                if (data.length > 0) {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').addClass('auto_list');
                    $('#autoSuggestionsList').html(data);
                }
            }
         });

     }
 }
</script>

Controller Function – [Welocome]

public function autocomplete()
{
     // load model
     $this->load->model('Welcome_model');

     $search_data = $this->input->post('search_data');

     $result = $this->Welcome_model->get_autocomplete($search_data);

     if (!empty($result))
     {
          foreach ($result as $row):
               echo "<li><a href='#'>" . $row->name . "</a></li>";
          endforeach;
     }
     else
     {
           echo "<li> <em> Not found ... </em> </li>";
     }
 }

Model Function – [Welcome_model]

SELECT id, name FROM `fruits`
public function get_autocomplete($search_data)
{
    $this->db->select('name, id');
    $this->db->like('name', $search_data);

    return $this->db->get('fruits', 10)->result();
}

A little bit styling –

input[type=text] {
    width: 200px;
    padding: 5px;
    margin: 5px 0;
    box-sizing: border-box;
}

#autoSuggestionsList > li {
    background: none repeat scroll 0 0 #F3F3F3;
    border-bottom: 1px solid #E3E3E3;
    list-style: none outside none;
    padding: 3px 15px 3px 15px;
    text-align: left;
}

#autoSuggestionsList > li a { color: #800000; }

.auto_list {
    border: 1px solid #E3E3E3;
    border-radius: 5px 5px 5px 5px;
    position: absolute;
}

 

You can download the whole CodeIgniter Code from the github repo.

 

If it doesn’t work or you face any error to implement the code, Please send me a mail (me@orionwebtech.net). I will try to respond you.

Get the Last added ID and Insert it to another Table as a foreign key

Get the last id from the database:-

$this->db->insert_id();

Suppose I have two table ‘product_sale’ and ‘customer_information’. I want to get last id from the ‘product_sale’ table and insert it to ‘customer_information’ table as a foreign key.

public function insertProductsale($data, $data_c) {

$this->db->insert('product_sale', $data);
$sale_id = $this->db->insert_id();
$data_c['sale_id'] = $sale_id;
return $this->db->insert('customer_information', $data_c);
}

CodeIgnier pagination CSS Style

We always use pagination in most of the part of a Custom CMS and other where you need. But sometime we don’t have enough time to create a nice style in the pagination links. Now I just share with all to some style css code. So just copy and paste and got a nice style in Pagination Anchor tag.

<style type="text/css">

#pagination a, #pagination strong {
background: #e3e3e3;
padding: 4px 7px;
font-size: 13px;
text-decoration: none;
border: 1px solid #eac9c9;
color: #292929;
}

#pagination strong, #pagination a:hover{
font-weight: normal;
background: #AFAFAF;
}

table {
margin-bottom: 30px;
}

</style>

<div id="pagination">
<?php
echo $this->pagination->create_links();
?>
</div>