Auto Complete by Js

CDN
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
<script src='https://cdn.rawgit.com/pguso/jquery-plugin-circliful/master/js/jquery.circliful.min.js'></script>

<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>
HTML CODE
<div class="form-group">
      <label for="country">Country</label>
      <input name="country" id="country" class="form-control input-number" onkeydown="getCountriesName()" placeholder="Entry your country name" type="text">
</div>
HTML JS CODE
function getCountriesName() {
        $("#country").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "<?php echo base_url('Auth/getCountries'); ?>",
                    type: "GET",
                    dataType: "json",
                    data: { Prefix: request.term },
                    success: function (data) {
                        response($.map(data, function (item)
                        {
                            return { label: item.nicename , value: item.nicename };
                        }))
                    }
                });
            },

            select: function (event, ui) {
                $('#country').attr('value',ui.item.label);
            }
        });
    }
CONTROLLER CODE
    public function getCountries(){
        $prefix = $this->input->get('Prefix');
        $country = $this->auth_model->getCountry($prefix);
        print(json_encode($country, JSON_UNESCAPED_UNICODE));
    }

MODEL CODE
public function getCountry($prefix) {
    $this->db->select('*');
    $this->db->from('country');
    $this->db->like('nicename', $prefix, 'after');
    return $query = $this->db->get()->result_array();
}