Jquery autocomplete using typeahead suggestion does not display after a successful ajax

Question

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?

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.

my 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>

my input:

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

my related script:

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

console log output screen shot

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.

Answer 1

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