Skip to content

Instantly share code, notes, and snippets.

@gauravv7
Created June 3, 2018 13:08
Show Gist options
  • Select an option

  • Save gauravv7/c91e7e02d15f1eff61428b2ae6afba86 to your computer and use it in GitHub Desktop.

Select an option

Save gauravv7/c91e7e02d15f1eff61428b2ae6afba86 to your computer and use it in GitHub Desktop.
ajaxified easy_select calls
// sample property callback for select2 constructor argument
function formatState (state) {
var baseUrl = "http://lorempixel.com/4/4/";
var $state = $(
'<span><img src="' + baseUrl + '" class="img-flag" /> ' + (state.title || state.text)+ '</span>'
);
return $state;
};
function formatTodo (repo) {
if (repo.loading) {
return repo.title;
}
var markup = "<div class='select2-result-repository clearfix'>" +
"<div class='select2-result-repository__meta'>" +
"<div class='select2-result-repository__title'>" + repo.title + "</div>";
if (repo.completed) {
markup += "<div class='select2-result-repository__description'>" + repo.completed + "</div>";
}
return markup;
}
$(document).ready(function(){
$('body').easy_select({
ajax: {
url: "https://jsonplaceholder.typicode.com/todos",
dataType: 'json',
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
// 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, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;
console.log(data);
return {
results: data,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
placeholder: 'Search for a todo',
escapeMarkup: function (markup) { return markup; },
templateResult: formatTodo,
templateSelection: formatState
});
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment