jquery plugin for select search code example
Example: jquery select plugin
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
function matchCustom(params, data) {
if ($.trim(params.term) === '') {
return data;
}
if (typeof data.text === 'undefined') {
return null;
}
if (data.text.indexOf(params.term) > -1) {
var modifiedData = $.extend({}, data, true);
modifiedData.text += ' (matched)';
return modifiedData;
}
return null;
}
$(".search-select").select2({
matcher: matchCustom
});
});
</script>
.select2-container--default .select2-selection--single {
background-color: #ebebeb;
border-radius: 10px;
padding: 14px 24px 14px 24px;
border: 1px solid #dcdee1;
color: #73777fb3;
min-height: 57px;
width: 100%;
font-size: 18px;
}
.select2-selection__arrow {
top: -7px;
margin-top: auto;
margin-bottom: auto;
bottom: 0;
right: 15px !important;
}