Typeahead.js включают динамическую переменную в удаленном URL-адресе

Я пробовал уже несколько часов, чтобы получить переменную в моем пути "remote". Переменная изменится, в зависимости от другого входа. Вот код:

school_value = $('#school').val();
$('#school').change(function () {
    school_value = $(this).val();
    $('#programme').typeahead('destroy'); // I have also tried with destroy - but it doesnt work.
});
$('#programme').typeahead({
    remote: 'typeahead.php?programme&type=1&school_name=' + school_value,
    cache: false,
    limit: 10
});

Переменная "school_type" не задана в удаленном addr и поэтому не вызывается.

Есть ли у вас какая-нибудь подсказка, как заставить его работать? Я только что переключился с Bootstrap 2.3 на 3, а затем заметил, что typeahead устарел. Над кодом работал над Bootstrap 2.3, но кажется, что при инициализации script удаленный путь заблокирован.

Ответы

Ответ 1

Я нашел решение! Код:

$('#programme').typeahead({
    remote: {
        url: 'typeahead.php?programme&type=1&school_name=',
        replace: function () {
            var q = 'typeahead.php?programme&type=1&school_name=';
            if ($('#school').val()) {
                q += encodeURIComponent($('#school').val());
            }
            return q;
        }
    },
    cache: false,
    limit: 10
});

На основе этого потока ответьте: Bootstrap 3 typeahead.js - атрибуты удаленного URL

См. функцию "replace" в typeahead.js docs

Ответ 2

Я считаю, что принятый ответ теперь устарел. Опция remote больше не имеет replace. Вместо этого вы должны использовать prepare:

$('#programme').typeahead({
    remote: {
        url: 'typeahead.php?programme&type=1&school_name=',
        prepare: function (query, settings) {
            settings.url += encodeURIComponent($('#school').val());

            return settings;
        }
    }
});

Одна проблема, с которой я столкнулся, - это вытащить значение из другого объекта typeahead. Typeahead по существу дублирует ваш ввод, включая все классы, поэтому у вас есть два почти одинаковых объекта: один с классом tt-hint, а другой с tt-input. Я должен был указать, что это был селектор tt-input, иначе значение, которое я получил, было пустой строкой.

$('.field-make').val();  // was "" even though the field had a value
$('.field-make.tt-input').val();  // gave the correct value

Удаленные опции Bloodhound

Ответ 3

На самом деле есть небольшое уточнение ответа Маттиаса, доступного в новом Bloodhound js, что уменьшает дублирование и возможность ошибки:

$('#programme').typeahead({
    remote: {
        url: 'typeahead.php?programme&type=1&school_name=',
        replace: function (url, query) {
            if ($('#school').val()) {
                url += encodeURIComponent($('#school').val());
            }
            return url;
        }
    },
    cache: false,
    limit: 10
});

Ответ 4

@Mattias. Как и в случае с головами, вы можете немного очистить свой метод replace, указав необязательный параметр url.

$('#programme').typeahead({
    remote: {
        url: 'typeahead.php?programme&type=1&school_name=',
        replace: function (url, query) {
            // This 'if' statement is only necessary if there a chance that the input might not exist.
            if ($('#school').val()) {
                url += encodeURIComponent(('#school').val());
            }
            return url;
        }
    },
    cache: false,
    limit: 10
});