Question

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

然后我更改了此功能以使用一些模糊逻辑，以便返回的字符串包含不少于用户输入的3个字符，并随着用户输入更具体的搜索字符串逐渐变为更精细的列表。

然后我使用自动完成控件的included 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中搜索文本字符串进行比较，其中对于doc中的每个出现，单词background为黄色突出显示为黄色。我不在乎它是否仅在用户输入的文本后面将背景变为不同的颜色，或者更改文本颜色。

感谢，

Answer 1

我要感谢以下链接提供问题的解决方案。我终于找到了几乎有用的东西。为了不发布链接，请查看下面的工作代码。

请注意以下代码中的一些细微更改，而不是最后链接中找到的原始内容。

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

在AutoComplete Extender上提供以下值....

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

就是这样，我不得不进行一些小的改动和调试。就像关闭java脚本标记错误一样，从文本框中获取值的函数不适用于e.get_value（）所以我将其更改为e._item.innerText并且似乎工作正常。

Source of Solution

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

1 个答案: