tag-it 自动完成 - codeigniter

Question

所以我想问一下为什么我的自动完成功能不起作用，我想从控制器内部的数据库中获取数据，但它没有给我结果。这是代码。

JS

$(document).on('show.bs.modal', '#searchmusic', function() {
$('#searchtags').tagit({
    allowSpaces: true,
    placeholderText: 'Search Tags',
    autocomplete: ({
        source: function(request, response) {
            $.ajax({
                url: base_url + '/songtags/search_tags',
                type: "GET",
                success: function(data) {
                    var songtagdata = JSON.parse(data);
                    response($.map(songtagdata, function(key, value) {
                        return {
                            label: value.tag_name,
                            value: value.tag_name
                        }
                        console.log(songtagdata);
                    }));
                },
                error: function(request, status, error) {
                    alert(error);
                }
            })
        },
        minLength: 2
    })
});
});

控制器

    public function search_tags(){
    $song_tags = $this->song_tags_model->get_tags();
    $encode = json_encode($song_tags);
    echo $encode;
    }

Answer 1

您可以尝试以下代码示例，它只是将数据设置为固定对象：

$(document).ready(function () {
    $("#suggest").autocomplete({
        delay: 100,
        source: function (request, response) {
            Promise.resolve(
                [1,2,3,4,5,6]
            )
            .then(function(data){
                console.log(
                  "got data:"
                  ,JSON.stringify(
                    data,
                    undefined,
                    2
                  )
                )
                response(data);
            });
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<input type="text" placeholder="type something ..." id="suggest" />

如果可行，但 ajax 版本不可行，那么问题出在请求或请求格式上，因此您需要使用控制台的输出更新您的答案。

您没有理解该示例，这是应用于您的代码的示例，它不使用 AJAX，而只是根据您期望的 ajax 设置值：

$(document).ready(function () {
    $("#suggest").autocomplete({
        delay: 100,
        source: function (request, response) {
            Promise.resolve(
                `[{"tag_name":"helo"},{"tag_name":"world"}]`
            )
            .then(function(data){
                console.log(
                  "got data:"
                  ,data
                )
                response(
                  JSON.parse(data)
                  .map(
                    item => ({
                      label:item.tag_name
                      ,value:item.tag_name
                    })
                  )
                );
            });
        }
    });
});

可以在here 找到工作示例。如果它在您的页面中不起作用，则可能是 css 问题，如果确实起作用，则您的问题可能是 xhr 问题或响应的格式与您的预期不符。