在 ajax 自动扩展器文本框中突出显示键入的字符答案

【问题标题】：higlight typed character in ajax autoextender textbox在 ajax 自动扩展器文本框中突出显示键入的字符
【发布时间】：2014-09-18 09:20:02
【问题描述】：

我正在使用 AJAX 自动扩展器，我想要的是当我按“a”时，填充列表中的所有 a 都变成黄色或任何其他颜色。

下面是我的代码：

 <asp:TextBox ID="txtCourse" runat="server" Width="400px"></asp:TextBox>
        <cc1:AutoCompleteExtender ID="AutoExtend" runat="server" CompletionInterval="100"
            CompletionSetCount="10" TargetControlID="txtCourse" MinimumPrefixLength="1" ServicePath="~/courseprovider.asmx"
            OnClientItemSelected="OnContactSelected" ServiceMethod="getcoursedetail">
        </cc1:AutoCompleteExtender>

请帮忙！！！！

【问题讨论】：

标签： c# jquery web-services asp.net-ajax

【解决方案1】：

添加

  <CC1:AutoCompleteExtender ID = autoextender CompletionListCssClass="completionListElement"
   CompletionListHighlightedItemCssClass="AutoComplete_ListItemHilite"  CompletionListItemCssClass="listItem" 
   OnClientPopulated="ClientPopulated" ></CC1:AutoCompleteExtender >

CSS 类

   .completionListElement
    {
       list-style-type:none;
        margin:0px 0px 0px 1px;
       padding:0px;
       border:1px solid #cecece;
       background-color:#efefef;
       box-shadow:0px 3px 6px 0px #B8B8B8;
       cursor:pointer;
    }        
    .listItem
    {
       list-style-type:none; 
       padding:5px;
    }        


    .AutoComplete_ListItemHilite
  {
   color: #4B4B4B; padding:5px;  background-color:#cecece;
  }
   .AutoComplete_ListItemHiliteText
  {
   color: #ce0000;  font-weight:bold;
   }

添加 JAVASCRIPT

    function ClientPopulated(source, args) {
        if (source._currentPrefix != null) {
            var list = source.get_completionList();

            var search = source._currentPrefix.toLowerCase();

            for (var i = 0; i < list.childNodes.length; i++) {
                var text = list.childNodes[i].innerHTML;
                var index = text.toLowerCase().indexOf(search);
                if (index != -1) {
                    var value = text.substring(0, index);
                    value += '<span class="AutoComplete_ListItemHiliteText">';
                    value += text.substr(index, search.length);
                    value += '</span>';
                    value += text.substring(index + search.length);
                    list.childNodes[i].innerHTML = value;
                }
            }
        }
    }

并在你的 Javascript OnContactSelected() 中添加这个

添加这个 --->

      function OnContactSelected(source, e) {
        source.get_element().value = (document.all) ? e._item.innerText : e._item.textContent;
        var str = $('#<%=txtCourse.ClientID %>').val();

【讨论】：