How to Turn the found character into bold instead of underline in chosen-jquery #3155
Comments
|
Try this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chosen Dropdown with Bold Matching</title>
<link rel="stylesheet" href="
https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css">
<style>
.chosen-container {
width: 100% !important;
}
</style>
</head>
<body>
<select class="chosen-select" multiple>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Cherry">Cherry</option>
<option value="Date">Date</option>
<option value="Elderberry">Elderberry</option>
</select>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js
"></script>
<script>
$(document).ready(function() {
$(".chosen-select").chosen({
no_results_text: "No results found",
search_contains: true
});
// Custom function to highlight matching characters
function highlightMatch(item, query) {
const regex = new RegExp(`(${query})`, 'gi');
return item.replace(regex, '<strong>$1</strong>');
}
// Override the result rendering
$.fn.chosen.prototype.result = function(item, data) {
const query = this.search_field.val();
const highlightedText = highlightMatch(item, query);
return `<div class="result-item">${highlightedText}</div>`;
};
// Reinitialize Chosen to apply custom rendering
$(".chosen-select").trigger("chosen:updated");
});
</script>
</body>
</html>
…On Sun, Oct 13, 2024, 21:55 zaighamaliladak ***@***.***> wrote:
Dear Friend
I am using chosen jquery and working fine
i just want to do a small change in the chosen dropdown list then when
ever i type some character the chosen jquery finds it character by
character in the dropdown list items and show found items with the found
characters underlined. i just wish to change that underline characters to
bold character.
if some body can help me or if their is any built in feature present
please let me know.
Regards
Zaigham
—
Reply to this email directly, view it on GitHub
<#3155>, or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AC4RXBK6UC5DCY53RIEVWX3Z3K6ZBAVCNFSM6AAAAABP3WEJS6VHI2DSMVQWIX3LMV43ASLTON2WKOZSGU4DIMJYHA3DGNY>
.
You are receiving this because you are subscribed to this thread.Message
ID: ***@***.***>
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Dear Friend
I am using chosen jquery and working fine
i just want to do a small change in the chosen dropdown list then when ever i type some character the chosen jquery finds it character by character in the dropdown list items and show found items with the found characters underlined. i just wish to change that underline characters to bold character.
if some body can help me or if their is any built in feature present please let me know.
Regards
Zaigham
The text was updated successfully, but these errors were encountered: