突出显示ajax auto extender文本框中的类型字符

时间:2014-09-18 09:20:02

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

我正在使用AJAX Auto Extender,我想要的是当我按下" 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>

请帮助!!!!

1 个答案:

答案 0 :(得分:0)

ADD in

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

CSS CLASS


   .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()

中加上这一个

添加这一个---&gt;

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