04 Apr
Highlight jQuery Autocomplete results that match the text already typed
I am assuming that you already implemented jQuery Autocomplete . Now you want to just highlight the part of reslut which is matching with the text you typed. For example
Rajeev Kumar
Home of Rajeev
For this you have to use customer formatter but keep in mind at the time of selection you have to remove you formatter html as well.
Below is the simple example of jQuery Autocomplet function, I am highlighting with <b> html Tag
<script>
$('#text_box_id').autocomplete({
source: function(request, response) {
$.ajax({
url: "jason_result_file.php",
dataType: "json",
data: {
serach_name : request.term,
},
success: function(data) {
if($.trim(data) == '')
response($.map(data, function (item) {
return {
label: highlight(item.value, request.term),
value: item.value
};
}));
}
});
},
minLength: 2,
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "ui-autocomplete-item", item )
.append(item.label )
.appendTo( ul );
};
function highlight(s, t) {
var matcher = new RegExp("(" + $.ui.autocomplete.escapeRegex(t) + ")", "ig");
return s.replace(matcher, "<b>$1</b>");
}
</script>
I am a software engineer who specializes in Internet applications. I have worked with a wide variety of technologies and programming languages to open source LAMP environments. I have more than 6 years of object-oriented programming experience and am highly proficient in ActionScript, PHP, MYSQL, JavaScript, Jquery and a multitude of other technologies used in modern web applications.
Latest posts by Rajeev Achra (see all)
- Jquery webcam plugin - June 19, 2016
- How To Add and Delete Users on a CentOSServer - June 5, 2016
- How To Set Up vsftpd on CentOS 6 - June 5, 2016