locked
change text color only of user entered string in AJAX extended textbox RRS feed

  • Question

  • User-359936451 posted

    Not sure if I should post this in the jquery forum or elsewhere but since I am extending a texbox control with AJAX Autocomplete I thought I would start here.

    I have successfully implemeted an autocomplete text box where once the user enters 3 characters my database returns a list of records that begin with the first 3 characters entered by the user.

    I then changed this feature to use some Fuzzy logic so that the strings that returned contain no less than the 3 characters entered by the user and progressively becomes a shorter more refined list as the user enters a more specific search string.

    I then used the inlcluded CSS class of the Autocomplete control to change the backgorund color and selected item color in the extended texbox.

                    <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>

    What I would like to do now is change the color of the text ONLY in each string (list item) that matches what the user is entering after 3 or more characters have been entered.

    I have been searching for something like this on the web for 2 days and have not found a similar solution. My efforts have become more than frustrating.

    User Enters:  fish

    Results list should look like:

    Fishing

    New Fishing licenses

    Renew Fishing License

    Fish and hatchery lists

    If anyone has any links or similar type of solution I would be very pleased to look it over.

    This functionality could best be compared to searching for a text string in a PDF where the word background is highlighted yellow for each occurance within the doc. I don't care if it turns the background a different color ONLY behind the text the user entered, or changes the text color.

    thanks,

    Friday, March 28, 2014 4:16 PM

Answers

  • User-359936451 posted

    Found an answer....

    I would like to thank the link below for providing a solution to the question. I finally found something that almost worked. In the interest of not posting only a link, please review the working code below.

    Note some of my minor changes in the below code over the original found in the link at the end.

    <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;
               }
            }
         }
      }
    </script>
    

    On your AutoComplete Extender provide the following values....

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

    That is about it, I had to perform some minor changes and debugging. Like the closing java script tag is wrong, and the function to get the value from the textbox did not work with e.get_value() so I changed it to e._item.innerText and seem to be working just fine.

    Source Link:

    http://www.techtasks.net/2011/03/how-to-display-prefixtext-in-different.html

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 31, 2014 4:57 PM

All replies

  • User1208776063 posted

    You should try using OnShown event of AjaxAutoCompleteExtender. Function accepts two parameters sender and arguments. Then, you can access the popup control and its child elements. Once you have access to the elements, you can jQuery to add some highlight class to items with the text that matches.  Have you tried that approach already? Sorry, I have not tried any example. Otherwise, I would have posted a sample code.

    Saturday, March 29, 2014 3:03 AM
  • User-359936451 posted

    To be honest I thought I was headed toward jQuery or this project, but i have not yet gotten there and am still unsure how to this. I have done some jQuery and figured it might be well suited for this. Just at a bit of a loss as to how to pull this one together.

    But you referenced a popup control, I am not using a popup. Or are you refering to the part of the text box that displays the string with the mathing text?

    I'll read up the "ShowOnlyCurrentWordInCompletionListItem" event I believe is what you are refering to and see if I can figure something out. OnShown or OnShow do not appear to be a property of the AutoComplete Extender

    thanks

    Monday, March 31, 2014 7:45 AM
  • User-359936451 posted

    Found an answer....

    I would like to thank the link below for providing a solution to the question. I finally found something that almost worked. In the interest of not posting only a link, please review the working code below.

    Note some of my minor changes in the below code over the original found in the link at the end.

    <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;
               }
            }
         }
      }
    </script>
    

    On your AutoComplete Extender provide the following values....

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

    That is about it, I had to perform some minor changes and debugging. Like the closing java script tag is wrong, and the function to get the value from the textbox did not work with e.get_value() so I changed it to e._item.innerText and seem to be working just fine.

    Source Link:

    http://www.techtasks.net/2011/03/how-to-display-prefixtext-in-different.html

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 31, 2014 4:57 PM