2

Bootstrapに先行入力スクリプトを使用しようとしています。うまく機能していますが、もう少しダイナミックにしたいと思います。コードを複製せずに、同じページで複数のオートコンプリート入力を実行したいと思います。

HTML：

<input type="text" class="typeahead" name="person_name" id="person-search">
<input type="text" class="typeahead" name="city_name" id="city-search">

基本的なjQuery：

$('.typeahead').typeahead({
    source: function(typeahead, query) {
        return $.ajax({
            url: '/ajax_lookup_script.php'
                + '?source=' + ###[HOW CAN I PUT ELEMENT ID HERE?]###
                + '&q=' + query,
            success: function(data) {
                return typeahead.process(data);
            }
        });
    },
    property: 'name'
});

上記は（明らかに）機能しません。しかし、クラス名をに設定してから.typeahead-person-search、ソースを手動で追加する新しい先行入力関数と、person-search完全にの別の関数を作成すると.typeahead-city-search、すべてが正常に機能します。2つの関数を分離する変数である場合は、2つの関数を使用しないようにします。

.typeaheadアクティブクラスの要素IDを$.ajax関数に入れるにはどうすればよいですか？

4

4 に答える 4

3

さて、私は何か他のことをしました。.typeaheadライブラリで直接テストすることはできませんでしたが、私が面白い別のライブラリで同じことをしました。

どのように試合をしています

$('.typeahead').each(function(){
    var self = $(this);

    self.typeahead({
        source: function(typeahead, query) {
            return $.ajax({
                url: '/ajax_lookup_script.php'
                    + '?source=' + self.attr('id')
                    + '&q=' + query,
                 success: function(data) {
                    return typeahead.process(data);
                }
            });
        },
        property: 'name'
    });
});
于 2012-08-08T17:15:45.553 に答える
2

編集::それがうまくいくはずの私の2番目の答えを試してください、私は同じ問題を抱えていた別の図書館でそれを使用しています

次のようなものを試してください

var id = $(this).attr('id');

それから

var url = 'blahblah' + id + 'blablahblah);

varurlをajaxクエリのurl：spotに配置します

于 2012-08-08T15:48:57.607 に答える
0

URLの動的部分を含む各入力にデータ属性を追加できます。

<input type="text" class="typeahead" name="person_name" id="person-search" data-source="person-search">
<input type="text" class="typeahead" name="city_name" id="city-search" data-source="city-search">

次に、jQueryを使用してそれを取得し、URLに渡すことができます。

$('.typeahead').typeahead({
    source: function(typeahead, query) {
        var source = $(this).data('source');
        return $.ajax({
            url: '/ajax_lookup_directory/'+source+'.php?q=' + query,
            success: function(data) {
                return typeahead.process(data);
            }
        });
    },
    property: 'name'
});
于 2012-08-08T15:49:34.893 に答える
0

あなたは以下を試すことができます

$('.typeahead').typeahead({
    source: function(typeahead, query) {
        return $.ajax({
            url: '/ajax_lookup_directory/' + $(this).attr('id') + '.php?q=' + query,
            success: function(data) {
                return typeahead.process(data);
            }
        });
    },
    property: 'name'
});
于 2012-08-08T15:49:56.927 に答える