19

Twitter Bootstrap 2.1.1 のTypeaheadコンポーネントと jQuery 1.8.1を使用しています。

typeahead のupdater関数内からテキスト ボックス要素にアクセスしようとしています。これが私の現在のコードです。

$('#client-search').typeahead({
    source: function (query, process) {
        $.get(url, { query: query }, function (data) {
            labels = [];
            mapped = {};
            $.each(data, function(i,item) {
                mapped[item.label] = item.value;
                labels.push(item.label);
            });
            process(labels);
        });
    }
    ,updater: function (item) {
        $('#client-id').val(mapped[item]);
        return item;
    }
    ,items: 10
    ,minLength: 2
});

同じページに多くの先行入力検索ボックスがあります。各検索ボックスには id#xxx-searchと、それに対応する id の隠し入力があり#xxx-idます。次のようにして、すべてに同じコードを再利用したいと思います。

$('#client-search, #endClient-search, #other-search').typeahead({

    ...

    ,updater: function (item) {
        var target = $(this).attr('id').split('-')[0] + '-id';
        $('#'+target).val(mapped[item]);
        return item;
    }

    ...

使用中のテキストボックス要素を参照すると思いましたthisが、firebug で未定義のエラーが発生するため、明らかにそうではありません。

$(this).attr("id") is undefined

thisの代わりに使用すると、次の$(this)ようになります。

this.attr is not a function

誰でもこの作業を手伝ってもらえますか?

更新: 答えなど!

以下の benedict_w の回答のおかげで、これは現在完全に機能するだけでなく、再利用性の点でもはるかに優れています。

これが私<input>のものです：

<input type="text" autocomplete="off"
    id="client-search"
    data-typeahead-url="/path/to/json"
    data-typeahead-target="client-id">
<input type="hidden" id="client-id" name="client-id">

検索ボックスが非表示の ID を参照する方法に注意してください。新しいjsは次のとおりです。

$(':input[data-typeahead-url]').each(function(){
    var $this = $(this);
    $this.typeahead({
        source: function (query, process) {
            $.get($this.attr('data-typeahead-url'), { query: query }, function (data) {
                labels = [];
                mapped = {};
                $.each(data, function(i,item) {
                    mapped[item.label] = item.value;
                    labels.push(item.label);
                });
                process(labels);
            });
        }
        ,updater: function (item) {
            $('#'+$this.attr('data-typeahead-target')).val(mapped[item]);
            return item;
        }
        ,items: 10
        ,minLength: 2
    });
});
4

2 に答える 2

24

別の関数の内部にいるため、要素への参照を外側のクロージャーに保存する必要があります。これは、内側のクロージャーのイベント ハンドラーに渡すことができます。セレクターをループする呼び出しを使用して、$.each()毎回要素 (this) への参照を保存することでそれを行うことができます。

$('#client-search, #endClient-search, #other-search').each(function() {
    var $this = $(this);
    $this.typeahead({
        ...

        ,updater: function (item) {
            var target = $this.attr('id').split('-')[0] + '-id';
            $('#'+target).val(mapped[item]);
            return item;
        }
        ...
     });
于 2012-09-13T19:44:26.177 に答える
6

受け入れられた答えは良いものですが、実際には外側の閉鎖を必要としない代替案を共有したかっただけです。私はブートストラップ v2.3.1 を使用しており、入力は から入手できますthis.$element。

例えば：

$(':input[data-typeahead-url]').typeahead({
    source: function (query, process) {
        $.get(this.$element.attr('data-typeahead-url'), { query: query }, function (data) {
            labels = [];
            mapped = {};
            $.each(data, function(i,item) {
                mapped[item.label] = item.value;
                labels.push(item.label);
            });
            process(labels);
        });
    }
    ,updater: function (item) {
        $('#'+this.$element.attr('data-typeahead-target')).val(mapped[item]);
        return item;
    }
    ,items: 10
    ,minLength: 2
});
于 2013-07-03T10:20:04.137 に答える