web-dev-qa-db-ja.com

Typeahead.jsはリモートURLに動的変数を含めます

「リモート」パスで変数を取得するために、何時間も試しました。変数は、別の入力に応じて変化します。コードは次のとおりです。

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'はリモートアドレスに設定されていないため、呼び出されません。

それを機能させる方法の手がかりはありますか？ Bootstrap 2.3から3に切り替えたところ、先行入力が非推奨になっていることに気付きました。上記のコードはBootstrap 2.3で機能しましたが、スクリプトが初期化されると、リモートパスはロックされます。

javascriptjquerytypeahead.js
13
FooBar

私は解決策を見つけました！コード：

$('#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属性

typeahead.js docs の関数「replace」を参照してください。

14
FooBar

受け入れられた答えは今では時代遅れだと思います。 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;
        }
    }
});

私が遭遇した問題の1つは、別のtypeaheadオブジェクトから値を取得することでした。 Typeaheadは基本的に、すべてのクラスを含む入力を複製するため、2つのほぼ同一のオブジェクトがあります。1つはtt-hintクラスで、もう1つは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リモートオプション

11
andrewtweber

実際には、新しいBloodhound jsで利用可能なMattiasの回答がわずかに改良されており、重複とエラーの可能性が減少しています。

$('#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
});
3
Kirk Northrop

@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's a chance that the input might not exist.
            if ($('#school').val()) {
                url += encodeURIComponent(('#school').val());
            }
            return url;
        }
    },
    cache: false,
    limit: 10
});
0
Andy Corman