c# - 如何突出显示下拉列表中的搜索文本

Question

我的网页中有一个 Textbox 和一个下拉列表。当我在 TextBox 中输入文本并且它的 TextChanged 事件被触发时，包含该文本的元素被加载到下面的另一个下拉列表中。我已将下拉状态设置为 Openloadondemand to 是的。
我只需要在下拉列表项中突出显示该搜索文本，但我做不到。

我有来自 here 的代码我尝试在我的页面中实现它。

代码是

样式.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

如果我的理解是正确的，那么您正在尝试实现一个自动完成文本字段，该字段向用户显示可供选择的选项下拉列表。用户输入的关键字查询在下拉列表的每个列表项中始终以粗体显示。

基于以上理解，您真正想要的是确保您的自动完成选项下拉列表包含一个 span 或用户在文本字段。

请看下面的例子:

HTML(下面的无序列表是由 JavaScript 在 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/