(Codeigniter-jquery ui) Autocomplete not working

Question

My intension is to search users. But the autocomplete is not working for me. I would like some help on this.

Here are my codes,

HTML

<input id="user-input" type="text" name="users" placeholder="Search User" autocomplete="on">

Model

function get_user($user) {

    $this->db->select('name');
    $this->db->like('name', $user);
    $query = $this->db->get('users');

    // echo $query; die;

    if($query->num_rows() > 0){
        foreach($query->result_array() as $row) {
            $row_set[] = htmlentities(stripslashes($row['name']));
        }

        echo json_encode($row_set); 
    }

}

Controller

public function user_search() {

    $this->load->model('users_model');

    if (isset($_GET['term'])){
        $user = strtolower($_GET['term']);
        $this->users_model->get_user($user);
    }

}

Js

$(function(){
  $("#user-input").autocomplete({
    source: "site/user_search",
    minLength: 1
  });
});

I am using the jquery ui version 1.12

What error are you getting? If no error, can you check in the console what controller is being accessed when you start typing in? — Rahi
– Rahi, Commented Jan 25, 2017 at 17:37
no controller is being accessed. so i guess it could be the jquery-ui compatibility issue. also, data is not passing through the model to the controller — Atul Kumar
– Atul Kumar, Commented Jan 25, 2017 at 18:00
When I said controller... I was referring to the source you are accessing. When you start typing in, it sends request to source: "site/user_search". What is the full URL it is accessing. Also, what is the outcome of that AJAX request? — Rahi
– Rahi, Commented Jan 25, 2017 at 18:22
did you use firebug to check the ajax JSON response. if you are getting JSON response can you post it for further analysis. I also implemented jquery ui autocomplete in one of my CI projects and its code look similar as yours. — Geordy James
– Geordy James, Commented Jan 25, 2017 at 18:23
@Rahi the complete url is localhost:8888/JB-Revamped/index.php/site/index. — Atul Kumar
– Atul Kumar, Commented Jan 25, 2017 at 18:44

Geordy James · Accepted Answer · 2017-01-26 04:30:13Z

Actually this work fine for me and for the sake of simplicity i removed the model.

In your view

    <script src="jquery-3.1.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
     <script>
     $(function(){
      $("#user-input").autocomplete({
        source: "<?php echo base_url('site/user_search'); ?>",
        minLength: 1
      });
    });
    </script> 
 <input id="user-input" type="text" name="users" placeholder="Search User" autocomplete="on">

In your Site Controller

    function user_search()
    {

        $user = $_GET['term'];

        $query = $this
                      ->db
                      ->select('name')
                      ->like('name',$user)
                      ->get('users');

         if($query->num_rows() > 0){
            foreach($query->result_array() as $row) {
                $row_set[] = htmlentities(stripslashes($row['name']));
            }

            echo json_encode($row_set); 
        }
   }

AngularJMK · Accepted Answer · 2017-12-13 17:55:22Z

0

 Set label and value in json response key
 function user_search()
    {

        $user = $_GET['term'];

        $query = $this
                      ->db
                      ->select('name')
                      ->like('name',$user)
                      ->get('users');

         if($query->num_rows() > 0){
            foreach($query->result_array() as $row) {
                $new_row['label']=htmlentities(stripslashes($row['name']));
                $new_row['value']=htmlentities(stripslashes($row['name']));
                $row_set[] = $new_row; //build an array
            }

            echo json_encode($row_set); 
 }

answered Dec 13, 2017 at 17:55

AngularJMK

1,27814 silver badges16 bronze badges

1 Comment

Tom Aranda Over a year ago

Generally, answers are much more helpful if they include an explanation of what the code is intended to do, and why that solves the problem without introducing others.

Collectives™ on Stack Overflow

(Codeigniter-jquery ui) Autocomplete not working

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related