I have tried to integrate tag/autocomplete for my site. Its working through option text. I am almost close to result but still hanging.
Now when you try to select option text there will appear related text. But now i want to appear kathmandu or related option text searching via option value also.
Ex: when we will search value a001 kathmandu will appear and select same as a002 it will appear pokhara
$("select").select2({
tags: "true",
placeholder: "Select an option",
allowClear: true,
width: '100%',
createTag: function (params) {
var term = $.trim(params.term);
if (term === '') {
return null;
}
return {
id: term,
text: term,
value: true // add additional parameters
}
}
});
.select2-container {
max-width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<select class="custom-select" multiple="multiple">
<option value="a001">Kathmandu</option>
<option value="a002">Pokhara</option>
<option value="a003">Lalitpur</option>
</select>
I think i am close after searching via value and click on it it will show relevant option with id. But i want only option text like pokhara kathmandu not an ID on select area.
To remove the double-ups of the Id
and the Text
showing when entering just the Id
check whether the entered term matches an existing Id
, and if it does simply return the Text
of the matching option:
options = [];
// create an array of select options for a lookup
$('.custom-select option').each(function(idx) {
options.push({id: $(this).val(), text: $(this).text()});
});
$("select").select2({
tags: "true",
placeholder: "Select an option",
allowClear: true,
width: '100%',
createTag: function (params) {
var term = $.trim(params.term);
if (term === '') {
return null;
}
// check whether the term matches an id
var search = $.grep(options, function( n, i ) {
return ( n.id === term || n.text === term); // check against id and text
});
// if a match is found replace the term with the options' text
if (search.length)
term = search[0].text;
else
return null; // didn't match id or text value so don't add it to selection
return {
id: term,
text: term,
value: true // add additional parameters
}
}
});
$('select').on('select2:select', function (evt) {
//console.log(evt);
//return false;
});
.select2-container {
max-width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<select class="custom-select" multiple="multiple">
<option value="a001">Kathmandu</option>
<option value="a002">Pokhara</option>
<option value="a003">Lalitpur</option>
</select>
if you search a001
then output is display id and text both in output. Learn placeholder.
If the value is an object, the object should be compatible with Select2's internal objects. The id should be the id to look for when determining if the placeholder should be displayed. The text should be the placeholder to display when that option is selected.
Example : search a001
after enter display kathmandu and a001 in textbox
using placeholder
in select2
placeholder: {
id: "-1",
text: "Select an option",
}
$("select").select2({
tags: "true",
placeholder: {
id: "-1",
text: "Select an option",
},
allowClear: true,
width: '100%',
createTag: function(params) {
var term = $.trim(params.term);
if (term === '') {
return null;
}
return {
id: term,
text: term,
value: true // add additional parameters
}
}
});
.select2-container {
max-width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<select class="custom-select" multiple="multiple">
<option value="a001">Kathmandu</option>
<option value="a002">Pokhara</option>
<option value="a003">Lalitpur</option>
</select>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With