Как выделить текст поиска в выпадающем списке

Question

У меня есть Textbox и выпадающий список на моей странице. когда я ввожу текст в TextBox, и его событие TextChanged содержит объекты, содержащие этот текст, которые загружаются в другой раскрывающийся список ниже. Я установил раскрывающееся состояние на Openloadondemand на true.
Мне нужно выделить этот текст поиска только в раскрывающихся списках, но я не могу этого сделать.

У меня есть коды от here, и я попытался реализовать его на своей странице.

Коды

style.css

<style type="text/css"> 
.highlight 
{ 
text-decoration:none; font-weight:bold;color:black; background:yellow; 

} 

CS код

protected void txtItemCode_TextChanged(object sender, EventArgs e) 
    { 
    //my code 
    ddl_ItemName.OpenDropDownOnLoad = true; 
    HighlightText(itemtext); 
    } 

public string HighlightText(string InputTxt) 
    { 
    Regex RegExp = new Regex(InputTxt.Replace(" ", "|").Trim(),  RegexOptions.IgnoreCase); 
    return RegExp.Replace(InputTxt, new MatchEvaluator(ReplaceKeyWords)); 
    } 
public string ReplaceKeyWords(Match m) 
    { 
    return ("<span class=highlight>" + m.Value + "</span>"); 
    } 

Мой Дизайн

<table> 
    <tr> 
    <td class="label">Item Code : </td> 
    <td style="width: 180px;" class="field"> 
     <telerik:RadTextBox ID="txtItemCode" AutoPostBack="true" runat="server" 
     ontextchanged="txtItemCode_TextChanged" > 
     </telerik:RadTextBox> 
    </td> 
    </tr> 
    <tr> 
    <td class="label">Item Name : </td> 
    <td class="field"> 
    <telerik:RadComboBox ID="ddl_ItemName" AutoPostBack="true" runat="server" 
     EmptyMessage="Choose an Item" 
     EnableLoadOnDemand="True" MarkFirstMatch="true" 
     onselectedindexchanged="ddl_ItemName_SelectedIndexChanged" >    
    </telerik:RadComboBox> 
    </td> 
</tr> 
</table> 

Answer 1

Если я правильно понимаю, вы пытаетесь реализовать автокомплекс ete, которое показывает пользователю раскрывающийся список вариантов на выбор. Запрос ключевого слова, введенный пользователем, всегда выделен жирным шрифтом в каждом элементе списка в раскрывающемся списке.

На основе вышеизложенного вы должны убедиться, что раскрывающееся меню автозаполнения обертывает span или любой элемент HTML вокруг ключевого слова, которое пользователь ввел в текстовое поле.

Смотрите следующий пример:

HTML (маркированный список ниже динамически генерируются JavaScripted на TextChanged)

<input type="text" value="Something"> 
<ul id="auto-complete"> 
    <li> 
     <a href="#"><span>Something</span> Borrowed</a> 
    </li> 
    <li> 
     <a href="#">There's <span>something</span> about Mary</a> 
    </li> 
    <li> 
     <a href="#"><span>Something</span>'s Gotta Give</a> 
    </li> 
</ul> 

CSS

#auto-complete li span { 
    font-weight: bold; 
} 

Проверьте следующее JSFiddle, чтобы увидеть стиль в действии: http://jsfiddle.net/hadynz/AE7TE/