tag-it autocomplete - 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

You could try the following code example that just sets data to a fixed object:

$(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" />

If that works but the ajax version doesn't then the problem is with the request or format of the request so you'll need to update your answer with the output of the console.

You did not understand the example, here is the example applied to your code, it does not use AJAX but just sets the values according to what you are expecting your ajax to be:

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

The working example can be found here. If it does not work in your page then maybe it's a css problem, if it does work then your problem is likely a xhr problem or the format of the response is not what you expected.