Автозаполнение Jquery с использованием подсказки typeahead не отображается после успешного ajax - PullRequest
0 голосов
/ 18 октября 2019

Я использую typeahead.js, чтобы поместить теги для моего многократного ввода. Функция ввода тегов работает правильно, за исключением того факта, что его предложение автозаполнения не выходит. Есть ли способ исправить эту проблему?

Я пробовал большинство решений, связанных с моей проблемой, которые уже есть на этом сайте, но в настоящее время все еще не могут отображать предложение автозаполнения. Я всегда застрял в успешном ответе на ajax, и все.

мой 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>

снимок экрана с выводом журнала консоли

Предположительно, вход, способный принимать несколько входов, и каждый выбранный вход будет отображаться внутри тега. Что делает его сложнее, так это отсутствие сообщения об ошибке. Таким образом, я знаю, что мой аякс сделан правильно.

1 Ответ

0 голосов
/ 21 октября 2019

Основная проблема заключается в том, что вы не возвращаете массив в правильной области видимости. Ваш return json.s_to; находится внутри функции успеха ajax, но вам нужно вернуть значение в родительской области видимости. Итак, код должен быть таким:

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