[SELECT2] keypress select2, enter key press keycode yp.vn (ok)
https://app.gitbook.com/@javascriptuse/s/project/prevent-form-submission-on-enter-key-press-keycode-ok
$(document).on('keydown', 'input.select2-search__field', function(e) {
console.log(e.keyCode);
});<?php
/***
Template Name: Test Search Elastic
***/
define("HOMEURLC", get_home_url());
?>
<!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>Search</title>
</head>
<body>
<div class="container">
<div class="row">
<h1>Test Search</h1>
<form action="<?php echo HOMEURLC . '/test-search'; ?>" method="GET" id="formelastic" role="form">
<div class="form-group">
<input type="text" name="searchelastic" class="form-control" id="js-data-example-ajax" placeholder="Input field">
</div>
<button type="submit" class="btn btn-primary btn-search-elastic">Submit</button>
</form>
</div>
</div>
<script type="text/javascript">
variablei = 1;
$(document).ready(function() {
$(document).on('keydown', 'input.select2-search__field', function(e) {
var value = '';
value += e.target.value;
$('#js-data-example-ajax').val(value);
if(e.keyCode == 13) {
$('#formelastic').submit();
}
});
$("#js-data-example-ajax").select2({
closeOnSelect: false,
dropdownParent: $('#formelastic'),
ajax: {
url: '<?php echo HOMEURLC . "/phpjson.php" ?>',
dataType: 'json',
type: "GET",
delay: 250,
data: function(params) {
$('#js-data-example-ajax').val(params.term);
return {
q: params.term,
from: params.page || 1,
size: 5
};
},
processResults: function(data,params) {
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,featuredimage: item._source.featured_image};
});
if(typeof params.page == 'undefined') {
params.page = 1;
}
var more = (params.page * 5) < 10;
return {
results: res,
pagination: {
more: more
}
};
}
},
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;
}
if(repo.featuredimage) {
featuredimage = repo.featuredimage;
}else {
featuredimage = 'https://cdn.pixabay.com/photo/2018/03/10/12/00/paper-3213924_1280.jpg'
}
var $container = $(
"<div class='select2-result-repository clearfix'>" +
"<div class='select2-result-repository__avatar'><a href='"+repo.permalink+"'><img src='"+featuredimage+"'></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);
if(repo.id) {
window.variablei++;
}
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;
});
$('.btn-search-elastic').click(function(event) {
$('#formelastic').submit();
});
});
</script>
<style type="text/css">
#formelastic {
position: relative;
}
.btn-search-elastic {
position: absolute;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
height: 100%;
line-height: normal;
}
.select2-results__option--selectable {
-webkit-box-shadow: 0px 1px 1px 1px rgba(198,176,15,0.82);
box-shadow: 0px 1px 1px 1px rgba(198,176,15,0.82);
}
.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: 100px;
height: 60px;
-o-object-fit: cover;
object-fit: cover;
}
.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;
}
input[type='text'],
input[type='search'],
input[type='number'],
textarea {
font-size: 16px;
}
</style>
<?php
$url = HOMEURLC . '/postjson.php/?q='.$_GET['searchelastic'];
if(isset($_GET) && isset($_GET['searchelastic']) && !empty($_GET['searchelastic'])) {
$jsonData = json_decode(file_get_contents($url),true);
$arrData = $jsonData['hits']['hits'];
echo '<pre>';
var_export($arrData);
echo '</pre>';
}
?>
</body>
</html>Previous[SELECT2] version Select2 3.5.3 nhìn trực quan hơn (ok)Next[SELECT2] Select2 Bootstrap Theme (ok)
Last updated
