Jquery UI autocomplete plugin not working

Question

I am a new learner, trying to use JQuery autocomplete plugin. but unable to get the results in autocomplete suggestion, although I am getting the results in console.log and as an alert. But not in suggestion list.

Input field

'Name: <input type="text" id="hint" name="hint" />'

jquery

$(document).ready(function () {
    $("#hint").keyup(function () {
            $( "#hint" ).autocomplete({
        source: function(request, response) {
            //console.info(request, 'request');
            //console.info(response, 'response');

            $.ajax({
                //q: request.term,
                url: "<?php echo base_url(); ?>index.php?Librarian/autocomplete/",
                data: { term: $("#hint").val()},
                dataType: "json",
                type: "POST",
                success: function(data) {
                    alert(data)
                    console.log(data);
                    response(data);
                }
            });
        },
        minLength: 2
    });
  }); 
});

Controller

function autocomplete($param1 = '', $param2 = '', $param3 = '') {
    // load model
    $this->load->model("Librarian_model");
    $search_data = $this->input->post('term');


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

    echo json_encode($result); 
    //returning the result as result_array() also tried implode function but got the error at response

}

OUtput at console log : enter image description here

and in alert i got object-object but when I use JSON.stringify output is a array

Hows the data forming? Please provide the data which you are getting — Jaymin, May 07 '19 at 05:48
0: name: "yatish kumar sharma" __proto__: Object 1: name: "yatish kumar sharma" __proto__: constructor: ƒ Object() hasOwnProperty: ƒ hasOwnProperty() isPrototypeOf: ƒ isPrototypeOf() propertyIsEnumerable: ƒ propertyIsEnumerable() toLocaleString: ƒ toLocaleString() toString: ƒ toString() valueOf: ƒ valueOf() __defineGetter__: ƒ __defineGetter__() __defineSetter__: ƒ __defineSetter__() __lookupGetter__: ƒ __lookupGetter__() __lookupSetter__: ƒ __lookupSetter__() get __proto__: ƒ __proto__() — kuldeep seetha, May 07 '19 at 06:07
Possible duplicate of [jQuery autocomplete with callback ajax json](https://stackoverflow.com/questions/9656523/jquery-autocomplete-with-callback-ajax-json) — Alex, May 07 '19 at 06:18

score 0 · Answer 1 · answered May 07 '19 at 06:16

Seams that you're ajax response format issue use map function to format ajax response -

$(document).ready(function () {
    $("#hint").keyup(function () {
            $( "#hint" ).autocomplete({
        source: function(request, response) {
            //console.info(request, 'request');
            //console.info(response, 'response');

            $.ajax({
                //q: request.term,
                url: "<?php echo base_url(); ?>index.php?Librarian/autocomplete/",
                data: { term: $("#hint").val()},
                dataType: "json",
                type: "POST",
                success: function(data) {
                    alert(data)
                    console.log(data);


                    response($.map(data, function (item) {
                        return {
                            label: item.name,
                            value: item.name
                        };
                    }));


                }
            });
        },
        minLength: 2
    });
  }); 
});

Jquery UI autocomplete plugin not working

1 Answers1