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

我有一個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>

來源

2014-01-08 Varun

如果我的理解是正確的，你想實現一個自動compl 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/

來源

2014-01-08 06:50:21 Hady

我有2個單獨的控制... O ne文本框和另一個下拉列表在我的頁面中...此處事件在TextChangedEvent中被觸發 – Varun

只需閱讀更新後的問題即可。看起來下拉菜單中的所有自動完成選項都使用'＃span.highlight'環繞用戶鍵入的關鍵字。這意味着你所缺少的是'＃span.highlight {font-weight：bold}'的CSS聲明 – Hady

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

回答

相關問題