bold matched character form word in autocomplete
<script >
$(document).ready(function(){
var termTemplate = "<span class='ui-autocomplete-term'>% s</span>";
var availableTags = <%=raw @name_json %>;
$( ".txt-search" ).autocomplete({
source: function(req, responseFn) {
var re = $.ui.autocomplete.escapeRegex( req.term);
var matcher = new RegExp( "^" + re, "i" );
var a = $.grep( availableTags, function(item,index){
return matcher.test(item);
});
responseFn( a.slice(0, 5) );
},
select: function(event, ui){
$('.txt-search').val(ui.item. value);
$(".search-form").submit()
},
search : function(){$('.autocomplete- animation').show();},
open: function (e, ui) {
var
acData = $(this).data('autocomplete'),
styledTerm = termTemplate.replace('%s', acData.term);
acData.menu.element.find('a')
.each(function () {
var me = $(this);
count = $(styledTerm).text().split("") .length
check_element=""
$($(me).text().split("")). each(function( index, element ) {
if(index==0 && count==1){
check_element="<span class='ui-autocomplete-term'>" +element+"</span>"
}
else if(index==0){
check_element="<span class='ui-autocomplete-term'>" +element
}else if(index==count-1){
check_element+=element+"</ span>"
}else{
check_element+=element
}
});
$(me).html(check_element);
setTimeout(
function()
{
//do something special
$('.autocomplete-animation'). hide();
}, 1000);
});
}
});
});
</script>
<style>$(document).ready(function(){
var termTemplate = "<span class='ui-autocomplete-term'>%
var availableTags = <%=raw @name_json %>;
$( ".txt-search" ).autocomplete({
source: function(req, responseFn) {
var re = $.ui.autocomplete.escapeRegex(
var matcher = new RegExp( "^" + re, "i" );
var a = $.grep( availableTags, function(item,index){
return matcher.test(item);
});
responseFn( a.slice(0, 5) );
},
select: function(event, ui){
$('.txt-search').val(ui.item.
$(".search-form").submit()
},
search : function(){$('.autocomplete-
open: function (e, ui) {
var
acData = $(this).data('autocomplete'),
styledTerm = termTemplate.replace('%s', acData.term);
acData.menu.element.find('a')
.each(function () {
var me = $(this);
count = $(styledTerm).text().split("")
check_element=""
$($(me).text().split("")).
if(index==0 && count==1){
check_element="<span class='ui-autocomplete-term'>"
}
else if(index==0){
check_element="<span class='ui-autocomplete-term'>"
}else if(index==count-1){
check_element+=element+"</
}else{
check_element+=element
}
});
$(me).html(check_element);
setTimeout(
function()
{
//do something special
$('.autocomplete-animation').
}, 1000);
});
}
});
});
</script>
.ui-autocomplete-term { font-weight: bold; color: #f05434;; }
Comments
Post a Comment