select2-v3版本-Loading Remote Data - 手册网

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<link href="//cdn.bootcss.com/select2/3.5.4/select2.min.css" rel="stylesheet"/>
<script src="//cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/select2/3.5.4/select2.min.js"></script>
<style>
img {
	width:100px;
	height:100px;
}
</style>
<input type="hidden" class="bigdrop" id="e6" style="width:600px" value="" />
<script>
    $("#e6").select2({
        placeholder: "Search for a repository",
        minimumInputLength: 1,
        ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
            url: "https://api.github.com/search/repositories",
            dataType: 'json',
            quietMillis: 250,
            data: function (term, page) {
                return {
                    q: term, // search term
                };
            },
            results: function (data, page) { // parse the results into the format expected by Select2.
                // since we are using custom formatting functions we do not need to alter the remote JSON data
                return { results: data.items };
            },
            cache: true
        },
        initSelection: function(element, callback) {
            // the input tag has a value attribute preloaded that points to a preselected repository's id
            // this function resolves that id attribute to an object that select2 can render
            // using its formatResult renderer - that way the repository name is shown preselected
            var id = $(element).val();
            if (id !== "") {
                $.ajax("https://api.github.com/repositories/" + id, {
                    dataType: "json"
                }).done(function(data) { callback(data); });
            }
        },
        formatResult: repoFormatResult, // omitted for brevity, see the source of this page
        formatSelection: repoFormatSelection,  // omitted for brevity, see the source of this page
        dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
        escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
    });
	function repoFormatResult(repo) {
      var markup = '<div class="row-fluid">' +
         '<div class="span2"><img src="' + repo.owner.avatar_url + '" /></div>' +
         '<div class="span10">' +
            '<div class="row-fluid">' +
               '<div class="span6">' + repo.full_name + '</div>' +
               '<div class="span3"><i class="fa fa-code-fork"></i> ' + repo.forks_count + '</div>' +
               '<div class="span3"><i class="fa fa-star"></i> ' + repo.stargazers_count + '</div>' +
            '</div>';

if (repo.description) {
         markup += '<div>' + repo.description + '</div>';
      }

markup += '</div></div>';

return markup;
   }

function repoFormatSelection(repo) {
      return repo.full_name;
   }
</script>

​x
 
<link href="//cdn.bootcss.com/select2/3.5.4/select2.min.css" rel="stylesheet"/>
<script src="//cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
<script src="//cdn.bootcss.com/select2/3.5.4/select2.min.js"></script>
<style>
img {
    width:100px;
    height:100px;
}
</style>
<input type="hidden" class="bigdrop" id="e6" style="width:600px" value="" />
<script>
    $("#e6").select2({
        placeholder: "Search for a repository",
        minimumInputLength: 1,
        ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
            url: "https://api.github.com/search/repositories",
            dataType: 'json',
            quietMillis: 250,
            data: function (term, page) {
                return {
                    q: term, // search term
                };