12

IgorVaynbergのSelect2jQueryプラグインとInfiniteScrollwith Remote Dataオプションを使用して、自分のWebサイトのオートコンプリート検索ボックスを作成しています。AJAXは正常に機能しており、結果は表示されていますが、選択できません。変更イベントが発生することはなく、結果をクリックしても何も起こりません。

Chromeコンソールにもエラーが表示されないので、構文エラーではなく、プラグインが無効な選択ボックスと間違えていると思います。編集：どちらも発生しなかった結果リストに対して別のクリック時イベントを試したので、イベントを妨害する何かがあると確信しています。

これが現在の私のコードです、

// Search
$("#site-search").select2({
    placeholder: "Search posts",
    minimumInputLength: 3,
    ajax: {
        url: "http://localhost/mysite/search",
        dataType: 'json',
        quietMillis: 500,
        data: function (term, page) {
            return {
                q: term,
                page_limit: 10,
                page: page // page number
            };
        },
        results: function (data, page) {
            var more = (page * 10) < data.length; // whether or not there are more results available

            // return the value of more to tell if more results can be loaded
            return {results: data, more: more};
        }
    },
    formatResult: function(post) {
        // return html markup for individual result item
        markup = '<img src="'+post.image+'" style="width:40%;float:left;margin-right:5px">';
        markup += '<p>'+post.title+'</p>';
        markup += '<div class="clearfix"></div>';
        return markup;
    },
    formatSelection: function(post) {
        // This shows up in the select box
        return post.title;
    },
    dropdownCssClass: "bigdrop" // apply css that makes the dropdown taller
}).on('change', function(e) {
    try {
        var slug = e.val.slug;
        window.location.href = "http://localhost/mysite/posts/"+slug;
    } catch(error) {
        console.log('Selected search result is invalid: ');
    }
});

選択ボックス自体は、次のタイプの入力にすぎません：非表示

<input type="hidden" class="bigdrop" id="site-search" style="width:100%;height:auto">
4

1 に答える 1

47

問題は、結果データに「id」という名前のプロパティがないようです。Select2プラグインは、データにidフィールドが必要であり、そうでない場合は、オプションを「選択不可」にします。この動作をオーバーライドするid関数を指定できます。

$("#site-search").select2({
   id: function(obj) {
      return obj.slug; // use slug field for id
   },
   ...
于 2013-01-10T09:37:48.570 に答える