成功的ajax后，不显示使用typeahead建议的jQuery自动完成 [英] Jquery autocomplete using typeahead suggestion does not display after a successful ajax

问题描述

我使用typeahead.js为我的多个输入添加标签.标签输入功能正常，除了不会自动完成提示.有什么办法可以解决这个问题?

I use typeahead.js to put tags for my multiple input. The tags input function correctly except the fact that its autocomplete suggestion does not come out. Is there any way to correct this problem?

我已经尝试了大多数与问题相关的解决方案，这些解决方案已经在此站点上，但是目前仍无法显示自动完成建议.我总是对成功的ajax响应感到困惑，仅此而已.

I've tried most solution related to my problem that are already on this site but currently still not be able to display the autocomplete suggestion. I am always stuck at the successful ajax response and that's it.

我的jquery:

<script>
$("#s_to").tagsinput({
        tagClass: 'uk-badge',
        typeaheadjs: {
            source: function(query) {
                console.log(query);
                url = "<?php echo base_url(); ?>index.php/<?php echo $loc_pts; ?>/ajax_email";
                var s_to = extractLast(query);
                ajax_status = "fail";
                $.ajax({
                    url: url,
                    method: "POST",
                    data: {
                        s_to: s_to
                    },
                    async: false,
                    dataType: "json",
                    success: function(json){
                        return json.s_to;
                    }
                });
            }
        }
    });
</script>

我的输入:

<input required type="text" name="s_to" id="s_to" class="controls uk-autocomplete-results" value="<?php echo $s_client_email; ?>" autocomplete="on" data-provide="typeaheadjs" />

我相关的脚本:

<script src="<?php echo base_url(); ?>assets/bower_components/typeahead.js/typeahead.jquery.min.js"></script>

控制台日志输出屏幕截图

假设输入能够接收多个输入，并且选中的每个输入都将显示在标签内.更难的是没有错误消息显示.因此，我知道我的ajax正确完成了.

Supposedly the input able to receive multiple input and each input seleccted will be displayed inside a tag. What make it harder is that no error message displayed. Thus, I know that my ajax is done correctly.

推荐答案

主要问题是您没有在正确的范围内返回数组.您的return json.s_to;在ajax成功函数中，但是您需要在父范围中返回该值.因此，代码应如下所示:

The main issue is that you do not return the array in correct scope. Your return json.s_to; is inside the ajax success function, but you need to return the value in parent scope. So, the code should be like this:

$("#s_to").tagsinput({
    tagClass: 'uk-badge',
    typeaheadjs: {
        source: function(query) {
            console.log(query);
            url = "<?php echo base_url(); ?>index.php/<?php echo $loc_pts; ?>/ajax_email";
            var s_to = extractLast(query);
            ajax_status = "fail";
            var toReturn = [];
            $.ajax({
                url: url,
                method: "POST",
                data: {
                    s_to: s_to
                },
                async: false,
                dataType: "json",
                success: function(json) {
                    toReturn = json.s_to;
                }
            });
            /* This is the correct scope to return the array */
            return toReturn;
        }
    }
});

这篇关于成功的ajax后，不显示使用typeahead建议的jQuery自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！