9

こんにちは、select 2 を使用しようとしていますが、これまでに見たものは良さそうです。私は1つのことをしようとしています。

jsonファイルへのajax呼び出しでデータを取得しようとしています-これを行う方法の例がWebサイトにありますが、事前入力リストを作成しようとしています。

これが意味するのは、たとえば、ユーザーがこのリンクで映画の検索をクリックしたときです

http://ivaynberg.github.io/select2/#infinite

json ファイルの最初の 10 個のムービーがリストされているため、いくつかの事前選択があります。

誰でも正しいダイエクションで私を指摘できますか

ここに私のコードがあります

function movieFormatResult(movie) {
    var markup = "<table class='movie-result'><tr>";
    if (movie.posters !== undefined && movie.posters.thumbnail !== undefined) {
        markup += "<td class='movie-image'><img src='" + movie.posters.thumbnail + "'/></td>";
    }
    markup += "<td class='movie-info'><div class='movie-title'>" + movie.title + "</div>";
    if (movie.critics_consensus !== undefined) {
        markup += "<div class='movie-synopsis'>" + movie.critics_consensus + "</div>";
    }
    else if (movie.synopsis !== undefined) {
        markup += "<div class='movie-synopsis'>" + movie.synopsis + "</div>";
    }
    markup += "</td></tr></table>"
    return markup;
}

function movieFormatSelection(movie) {
    return movie.title;
}

$(document).ready(function() {
$("#e7").select2({
    placeholder: "More",
    minimumInputLength: 3,
    ajax: {
        url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
        dataType: 'jsonp',
        quietMillis: 100,
        data: function (term, page) { // page is the one-based page number tracked by Select2
            return {
                q: term, //search term
                page_limit: 10, // page size
                page: page, // page number
                apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
            };
        },
        results: function (data, page) {
            var more = (page * 10) < data.total; // whether or not there are more results available

            // notice we return the value of more so Select2 knows if more results can be loaded
            return {results: data.movies, more: more};
        }
    },
    formatResult: movieFormatResult, // omitted for brevity, see the source of this page
    formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
    dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
    multiple: true,
    escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});
});

そしてhtml

    <article class="row" id="infinite">
<div class="span12">

   <p> 
 <input type="hidden" class="bigdrop" id="e7" style="width:200px"/> 



   </p>

</div>
</article>
4

1 に答える 1

1

minimumInputLength パラメータを 0 に設定すると、検索値なしで URL のクエリが試行されます。次に、検索文字列がない場合に 10 個のオプションを返すようにサーバーの応答を設定します。

于 2013-09-16T01:51:03.457 に答える