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 code

 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（下面的无序列表由TextShanged上的JavaScripted动态生成）

<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/

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

1 个答案: