<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<style type="text/css">
.select2-container{
width: 100%!important;
}
.select2-search--dropdown .select2-search__field {
width: 98%;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container">
<h1>Test Search</h1>
<select class="js-data-example-ajax" style="width: 300px">
<option value="">Nhập từ khóa tìm kiếm</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
$(".js-data-example-ajax").select2({
ajax: {
url: 'https://yp.vn/phpjson.php',
dataType: 'json',
type: "GET",
delay: 250,
data: function(params) {
return {
q: params.term
};
},
processResults: function(data) {
var res = data.hits.hits.map(function(item) {
return { id: item._source.post_id, text: item._source.post_title, address: item._source.meta.webbupointfinder_items_address[0].value, content: item._source.post_content,permalink: item._source.permalink};
});
return {
results: res
};
}
},
placeholder: "Nhập từ khóa tìm kiếm",
minimumInputLength: 1,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});
function formatRepo (repo) {
if (repo.loading) {
return repo.text;
}
var $container = $(
"<div class='select2-result-repository clearfix'>" +
"<div class='select2-result-repository__avatar'><a href='"+repo.permalink+"'><img src='https://cdn.pixabay.com/photo/2017/02/07/09/45/city-2045453_1280.jpg'></a></div>" +
"<div class='select2-result-repository__meta'>" +
"<div class='select2-result-repository__title'></div>" +
"<div class='select2-result-repository__content'></div>" +
"<div class='select2-result-repository__address'></div>" +
"</div>" +
"</div>"
);
$container.find(".select2-result-repository__title").text(repo.text);
$container.find(".select2-result-repository__content").html(repo.content);
$container.find(".select2-result-repository__address").text(repo.address);
return $container;
}
function formatRepoSelection (repo) {
return repo.full_name || repo.text;
}
$('.js-data-example-ajax').on('select2:select', function (e) {
var data = e.params.data;
window.location.href = data.permalink;
});
});
</script>
<style type="text/css">
.select2-result-repository {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.select2-result-repository__avatar {
margin-right: 10px;
}
.select2-result-repository__avatar >a {
display: block;
width: 250px;
height: 166px;
}
.select2-result-repository__title {
font-weight: 700;
}
.select2-result-repository__avatar img {
width: 100%;
height: height:100%;
-o-object-fit: cover;
object-fit: cover;
}
.select2-result-repository__content {
text-transform: lowercase;
margin-top: 5px;
margin-bottom: 5px;
}
.select2-result-repository__address {
text-transform: lowercase;
font-weight: 600;
}
</style>
</body>
</html>
