Javascript 仅更改AJAX扩展文本框中用户输入字符串的文本颜色

我正在用AJAX Autocomplete扩展一个texbox控件，并且我已经成功地实现了一个Autocomplete文本框，在该文本框中，一旦用户输入3个字符，我的数据库将返回一个以用户输入的前3个字符开头的记录列表

然后我改变了这个特性，使用了一些模糊逻辑，使得返回的字符串包含不少于用户输入的3个字符，并随着用户输入更具体的搜索字符串而逐渐变为一个更短更精确的列表

然后，我使用Autocomplete控件的内置CSS类更改扩展文本框中的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>

如果有人有任何链接或类似类型的解决方案，我将非常高兴地查看它

此功能最好与在PDF中搜索文本字符串进行比较，在PDF中，文档中的每一次出现，单词background都以黄色突出显示。我不在乎它是否只在用户输入的文本后面改变背景颜色，或者改变文本颜色

---

谢谢，

我想感谢下面的链接为这个问题提供了解决方案。我终于找到了一些几乎有效的方法。为了避免只发布链接，请查看下面的工作代码

请注意我在下面代码中的一些小改动，这些改动是在最后的链接中找到的

    <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脚本标记是错误的，并且从textbox获取值的函数与e.get_value（）不兼容，因此我将其更改为e._item.innerText，并且似乎工作正常

    <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>";
            }
        }
     }
  }         

BehaviorID="AutoCompleteEx"  
OnClientPopulated="acePopulated"
OnClientItemSelected="aceSelected"