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>
.ui-autocomplete-term { font-weight: bold; color: #f05434;; }
</style>

Comments

Popular Posts

How to pass hash in Postman

nginx: unrecognized service

Reading Excel Sheets using "Roo" gem in ruby on rails

Bootstrap Select Picker append add new item if search not exist

Add CORS to Nginx on AWS Elastic Beanstalk

Enable gzip compression on Elastic Beanstalk with nginx

Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock'

Get video duration by URL in Ruby on Rails

site-enables nginx setting in ruby in rails