У меня есть список имен, содержащих имена. , то у меня есть eventlistener, который ckecks для события нажатия клавиши. , если пользователь вводит i.g. a Все имена, начинающиеся с буквы A, должны быть выделены жирным шрифтом. поэтому все начальные буквы As должны быть выделены жирным шрифтом.highlite текстовые части с jquery, лучшая практика
Какой лучший способ использовать jquery для highlite только для части строки?
спасибо за вашу помощь
Вот функция, которую вы можете позвонить во время нажатия клавиши события, чтобы выделить строку для поиска:
function Highlight(search)
{
$('ul > li').each(function() {
if (this.innerHTML.indexOf(search) > -1)
{
var text = $(this).text();
text = text.replace(search, "<span id='highlight' style='font-weight: bold'>" + search + "</span>");
$(this).html(text);
}
else
{
this.innerHTML = $(this).text();
}
});
}
Тест HTML:
<ul id='list'>
<li>Bob Jones</li>
<li>Red Smith</li>
<li>Chris Edwards</li>
</ul>
Это не совсем так элегантно, как ответ заостренные, но он обрабатывает соответствие требованиям строк.
Есть JQuery плагин, чтобы сделать текст на первый план, но я не видел, что выдвигает на первый план часть слов.
Одним из возможных решений было бы поставить все ваши имена на странице с первой буквой в окружении <span> тега с классом:
<span class='A FL'>A</span>ugustine
<span class='C FL'>C</span>arlos
Вы можете использовать JQuery, чтобы возиться с теми, от имени класса ,
$('whatever').keypress(function(ev) {
var k = e.which.toUpperCase();
$('#textContainer span.FL').css('font-weight', 'normal');
$('#textContainer span.' + k).css('font-weight', 'bold');
});
Обратите внимание, что жирный шрифт жирнее, чем обычные символы, так что это будет иметь «волнистый» эффект, что пользователям могут не нравится. Вместо этого вы можете изменить цвет.
хм .. я думал об этом. таким образом, я должен поместить промежутки вокруг каждого знака. Я действительно собираюсь расширить его до соответствия строк. если вы пишете «carl», то CARLos следует возвысить ... нелегко, не так ли? – helle
Ну, если вы хотите это сделать, тогда да, вам нужно что-то другое. Вот несколько кодов для начала: http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html – Pointy
спасибо за вашу помощь ... я понял это и подробное разрешение приходит здесь:
var communities = $('#mylist').find('.name');
var temp_exp = new RegExp("^("+match_string+")","i");
communities.each(function(i){
var current = $(this);
var name = current.text();
name = name.replace(temp_exp, '<b>$1</b>');
current.html(name);
});
в то время как все элементы должны иметь «имя» класса.
@helle ... это список a
нет, это не избранный список, его просто список элементов. так что это могут быть строки в таблице или li-теги в html-списке. Я обращаюсь к ним с jquery через классы – helle