Jquery UI自动完成插件不起作用答案

【问题标题】：Jquery UI autocomplete plugin not workingJquery UI自动完成插件不起作用
【发布时间】：2019-05-07 05:44:01
【问题描述】：

我是一个新手，正在尝试使用 JQuery 自动完成插件。但无法在自动完成建议中获得结果，尽管我在console.log 和alert 中获得了结果。但不在建议列表中。

输入栏

'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
    });
  }); 
});

控制器

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

}

控制台日志的输出： enter image description here

在警报中我得到了对象对象，但是当我使用 JSON.stringify 时，输出是一个数组

【问题讨论】：

数据如何形成？请提供您获得的数据
0：名称：“yatish kumar sharma”proto：对象 1：名称：“yatish kumar sharma”proto：构造函数：ƒ Object( ) hasOwnProperty: ƒ hasOwnProperty() isPrototypeOf: ƒ isPrototypeOf() propertyIsEnumerable: ƒ propertyIsEnumerable() toLocaleString: ƒ toLocaleString() toString: ƒ toString() valueOf: ƒ valueOf() defineGetter: ƒ defineGetter__() __defineSetter: ƒ defineSetter__() __lookupGetter: ƒ lookupGetter__() __lookupSetter: ƒ lookupSetter__() 获取 __proto: ƒ __proto__()
这是我在控制台日志中得到的输出
更新了同样的问题@static startup
jQuery autocomplete with callback ajax json的可能重复

标签： javascript php jquery codeigniter jquery-ui-autocomplete

【解决方案1】：

你是 ajax 响应格式问题的接缝使用 map 函数来格式化 ajax 响应 -

$(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
    });
  }); 
});

【讨论】：