更改AJAX擴展文本框中用戶輸入字符串的文本顏色

我正在使用AJAX自動填充來擴展texbox控件，並且我成功實現了一個自動填充文本框，其中一旦用戶輸入3個字符，我的數據庫就會返回以用戶輸入的前3個字符。更改AJAX擴展文本框中用戶輸入字符串的文本顏色

然後，我改變了這個特性，使用了一些模糊邏輯，以便返回的字符串包含不少於用戶輸入的3個字符，並隨着用戶輸入一個更具體的搜索字符串而逐漸變成更簡潔的列表。

然後，我使用自動完成控件的包含CSS類來更改擴展texbox中的backgorund顏色和所選項目顏色。

  <asp:AutoCompleteExtender 
       ID="TextBox1_AutoCompleteExtender" 
       runat="server" 
       DelimiterCharacters="" 
       Enabled="True" 
       EnableCaching="True" 
       ServiceMethod="GetCompletionList" 
       ServicePath="~/search/strngSrch.asmx" 
       TargetControlID="TextBox1" 
       UseContextKey="True" 
       CompletionSetCount="30" 
       CompletionInterval="10" 
       MinimumPrefixLength="2" 
       CompletionListItemCssClass="itemHighlighted" 
       CompletionListHighlightedItemCssClass="itemHighlighted1">      
      </asp:AutoCompleteExtender>

我想現在要做的就是改變只有在每個串（列表項）的文本的顏色匹配3個或更多字符已進入後用戶輸入的內容。

我一直在網上搜索這樣的東西2天，還沒有找到類似的解決方案。我的努力變得更令人沮喪。

用戶輸入：魚

結果列表看起來應該像：

Fishing  (The 4 letters = to Fish should be red in each of these list items) 

New Fishing licenses 

Renew Fishing License 

Fish and hatchery lists

如果任何人有任何聯繫或相似類型的解決方案，我會很高興地看一下。

此功能可以最好地與在PDF中搜索文本字符串進行比較，其中文字背景爲文檔中的每個出現都突出顯示爲黃色。我不關心它是否僅在用戶輸入的文本背後變換背景顏色，或者更改文本顏色。

感謝，

來源

2014-03-28 htm11h

我要感謝下面的鏈接提供一個解決問題的辦法。我終於找到了幾乎可以奏效的東西。爲了不只發佈鏈接，請查看下面的工作代碼。

請注意我在下面的代碼中對最後鏈接中找到的原始代碼的一些小修改。

<script type="text/javascript"> 

function aceSelected(sender, e) { 

    var value = e._item.innerText;  // get_text();   

    if (!value) { 
     if (e._item.parentElement && e._item.parentElement.tagName == "LI") 
        value = e._item.parentElement.attributes["_innerText"].value; 
     else if (e._item.parentElement && e._item.parentElement.parentElement.tagName == "LI") 
        value = e._item.parentElement.parentElement.attributes["_innerText"].value; 
     else if (e._item.parentNode && e._item.parentNode.tagName == "LI") 
      value = e._item.parentNode._value; 
     else if (e._item.parentNode && e._item.parentNode.parentNode.tagName == "LI") 
        value = e._item.parentNode.parentNode._innerText; 
     else value = ""; 
    } 

    var searchText = $get('<%=TextBox1.ClientID %>').value; 

    searchText = searchText.replace('null', ''); 
    sender.get_element().value = value; 
} 

function acePopulated(sender, e) { 

    //Give BehaviourId here 
    var behavior = $find('AutoCompleteEx'); 
    var target = behavior.get_completionList(); 

    if (behavior._currentPrefix != null) { 

     var prefix = behavior._currentPrefix.toLowerCase(); 
     var i; 

     for (i = 0; i < target.childNodes.length; i++) { 

      var sValue = target.childNodes[i].innerHTML.toLowerCase(); 

      if (sValue.indexOf(prefix) != -1) { 
       var fstr = target.childNodes[i].innerHTML.substring(0, sValue.indexOf(prefix)); 
       var pstr = target.childNodes[i].innerHTML.substring(fstr.length, fstr.length + prefix.length); 
       var estr = target.childNodes[i].innerHTML.substring(fstr.length + prefix.length, target.childNodes[i].innerHTML.length);      
       target.childNodes[i].innerHTML = "<div class='autocomplete-item'>" + fstr + '<B><font color=red>' + pstr + '</font></B>' + estr + "</div>"; 
      } 
     } 
    } 
    }

在您自動完成擴展提供以下值....

也差不多了，我不得不進行一些小的改動和調試。就像關閉Java腳本標記是錯誤的，並且從文本框中獲取值的函數不能與e.get_value（）一起使用，所以我將其更改爲e._item.innerText，似乎工作得很好。

Source of Solution

來源

2014-03-31 20:52:13 htm11h

更改AJAX擴展文本框中用戶輸入字符串的文本顏色

回答

相關問題