Подсветка данных в dropdown ввегденных в input

[Predators]

Подсветка данных в dropdown ввегденных в input 

Не могу даже примерно сообразить куда копать  как называется

Буду рад любым подсказкам 

Имеем сгдедуюещёе:

 

При ввогде слова Нужно сгделать подсветку к примеру ик 

 

Заранее благодарен за люпотому чтой совет

[Predators]

Нашел скрипт но не могу прикрутить его к живому поиску обьегденить js не получаеться ВОт код js живого поиска

Спойлер

$(document).ready(function() {
var html = '';
html += '<div id="live-search">';
html += '   <ul>';
html += '   </ul>';
html += '</div>';

$(live_search.selector).after(html);
$('#search input[name=\'search\']').autocomplete({
    'source': function(request, response) {
        if ($(live_search.selector + ' input[type=\'text\']').val() == '') {
            $('#live-search').css('display','none');
        }
        else{
            var html = '';
            $('#live-search ul').html(html);
            $('#live-search').css('display','block');
        }
        var filter_name = $(live_search.selector + ' input[type=\'text\']').val();

        if (filter_name.length>0) {
            $.ajax({
                url: 'index.php?route=product/live_search&filter_name=' +  encodeURIComponent(request),
                dataType: 'json',
                success: function(result) {
                    var products = result.products;
                    // $('#live-search ul li').remove();
                    // $('.result-text').html('');
                    if (!$.isEmptyObject(products)) {

                        $.each(products, function(index,product) {
                            var html = '';

                            html += '<li>';
                            html += '<a href="' + product.url + '" title="' + product.name + '">';
                            html += '   <div class="product-name">' + product.name +'';
                            html += '   </div>';
                            html += '</a>';
                            html += '</li>';
                            $('#live-search ul').append(html);
                        });
                    } else {
                        var html = '';
                        html += '<li class="product-none">';
                        html += live_search.text_no_matches;
                        html += '</li>';

                        $('#live-search ul').html(html);
                    }
                    $('#live-search').css('display','block');
                    return false;
                }
            });
        }
    },
    'select': function(product) {
        $('input[name=\'search\']').val(product.name);
    }
});

$(document).bind( "mouseup touchend", function(e){
  var container = $('#live-search');
  if (!container.is(e.target) && container.has(e.target).length === 0)
  {
    container.hide();
  }
});
});

<div id="search_conteiner" class="search_class">
<div id="search" class="search_class">
  <input id="search_butter" type="text" name="search" value="<?php echo $search; ?>" placeholder="<?php echo $text_search; ?>"  />
    <button type="button" class="btn-loupe"></button>
</div>

И вот скрипт нашел которы иещёт отгдельно если сгделать блоки но в самом поиске не хочет рилиить 

 

var $input = $("#search_butter");
var $text = $(".product-name");
// Сохраним изначальный текст
var textOriginal = $text.text();
// Элемент, который задаст стили для выгделения
var $span = $('<span class="highlight">');
// Было ли уже выгделение в тексте
var hasChanges = false;

$input.on('input', function(e) {
  var searchKey = $input.val();
  // Можно обернуть в try{} catch, но ик быстрее. Если в регулярке только один
  // один символ '\', то RegExp выбрасывает ошибку
  var regExp = new RegExp(searchKey == '\\' ? '' : searchKey, 'gi');
  var textNew = textOriginal;

  // Если нет совпагдений в тексте
  if (!regExp.test(textOriginal)) {
    if (hasChanges) {
      hasChanges = false;
      $text.text(textNew);
    }

    return true;
  }

  hasChanges = true;
  $text.html(textNew.replace(regExp, function(match) {
    $span.text(match);
    return $span[0].outerHTML;
  }));
});

 

Буду благодарен за помощь совместить эти 2 js