How to bind the drop down in select 2 js?

Hi e6 is the id of select tag
$("#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
});

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Laxmidhar Sahoo6y ago
1. Hi e6 is the id of select tag
3. $("#e6").select2({
4. placeholder: "Search for a repository",
5. minimumInputLength: 1,
6. ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
7. url: "https://api.github.com/search/repositories",
8. dataType: 'json',
9. quietMillis: 250,
10. data: function (term, page) {
11. return {
12. q: term, // search term
13. };
14. },
15. results: function (data, page) { // parse the results into the format expected by Select2.
16. // since we are using custom formatting functions we do not need to alter the remote JSON data
17. return { results: data.items };
18. },
19. cache: true
20. },
21. initSelection: function(element, callback) {
22. // the input tag has a value attribute preloaded that points to a preselected repository's id
23. // this function resolves that id attribute to an object that select2 can render
24. // using its formatResult renderer - that way the repository name is shown preselected
25. var id = $(element).val();
26. if (id !== "") {
27. $.ajax("https://api.github.com/repositories/" + id, {
28. dataType: "json"
29. }).done(function(data) { callback(data); });
30. }
31. },
32. formatResult: repoFormatResult, // omitted for brevity, see the source of this page
33. formatSelection: repoFormatSelection, // omitted for brevity, see the source of this page
34. dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
35. escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
36. });