如何在下拉列表中突出顯示搜索文本

Question

我的網頁上有一個Textbox和一個下拉列表。 當我在輸入文本TextBox和TextChanged事件被觸發包含文本項被加載到另一個下拉列表below.I已成立下拉狀態Openloadondemand至true 。
我需要僅在下拉列表項中突出顯示該搜索文本，但我無法做到這一點。

我從這里獲得了代碼，並嘗試在頁面中實現它。

代碼是

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

如果我的理解是正確的，則您正在嘗試實現一個自動完成的文本字段，該字段向用戶顯示可供選擇的下拉菜單。 用戶輸入的關鍵字查詢在下拉列表的每個列表項中始終以粗體顯示。

基於以上理解，您真正想要的是確保您的自動完成選項下拉菜單在用戶在文本字段中輸入的關鍵字周圍包裹span或任何HTML元素。

請參見以下示例：

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/