Имитировать Google жирный шрифт с Jquery

Question

У меня есть скрипт, который отображает результаты поиска после ввода чего-либо в поле ввода. Я хочу имитировать Google, сделав текст жирным шрифтом , который похож на значение ввода.

Я пробовал это:

$(input).live('keyup', function(){
    var makeBold = $('#Results').css("font-weight","bold");

    if ($(input).val() == $('#Results').html()) {   
        makeBold();
    }
});

Проблема в том, что теперь все выделено жирным шрифтом, а не просто совпадающим значением. Как я могу сослаться на значение и связать это с результатами?

Answer 1

Ваша проблема в том, что вы выполняете "выделено жирным шрифтом" при определении makeBold.Результат css(), присвоенный makeBold, не является функцией.

var makeBold = $('#Results').css("font-weight","bold");

Если вы хотите, чтобы это была функция, присвойте makeBold анонимную.

var makeBold = function() { $('#Results').css("font-weight","bold"); }

Answer 2

Вы хотите обернуть соответствующие фрагменты результатов в тег <span style='font-weight:bold;'>.Вы можете использовать функцию javascript replace(), чтобы сделать это довольно легко.

Answer 3

Здесь есть код, который вы не показываете.Я не уверен, что происходит с вашими автоматически завершенными результатами.Из того, что здесь показано, все, что я знаю, это то, что у вас есть поле ввода и контейнер результатов, в котором я могу предположить, что он заполняется результатами только после нажатия клавиш (что не отображается в вашей функции).

Независимо от Javascript вы устанавливаете свойства CSS для всего контейнера #Results.Если есть и другие результаты, у них также будет сильный font-weight.Возможно добавьте теги span вокруг автоматически завершенного результата и используйте #Results span в качестве селектора.

EDIT: Если у вас есть функция автозаполнения, уже распечатывающая предложения, то, что я хотел бысделать для того, чтобы выделить напечатанную часть автоматически завершенного результата, сравнив их подстроки после keyup, а затем заключив их в сильный тег.

Answer 4

Работает по ссылке, предоставленной @Michael Mior

var makeBold = $(input).val();
$('#Results').highlight(makeBold);

Часть .highlight относится к CSS, который вы можете изменить жирным шрифтом или любым другим.