Modify the color of the text input by the user in an AJAX-enhanced text box

Question

Modify the color of the text input by the user in an AJAX-enhanced text box

After successfully implementing an autocomplete textbox using AJAX Autocomplete, I decided to enhance the feature with some Fuzzy logic. Now, as the user enters 3 characters, my database returns a list of records that match those characters.

The search results are refined based on the input provided by the user, creating a progressively shorter and more accurate list.

Using the included CSS class of the Autocomplete control, I customized the background color and selected item color in the extended textbox.

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

Now, I am looking to change the text color only in each string (list item) that matches what the user has entered after typing 3 or more characters.

Despite searching for a solution online for 2 days, I have been unable to find something similar, leading to frustration.

For example, if a user enters "fish," the results list should appear like this:

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

If you have any links or solutions similar to what I described, I would greatly appreciate your help.

This functionality can be likened to searching for a specific text string in a PDF where the word is highlighted yellow in each occurrence within the document. I am open to changing either the background of the text entered by the user or changing the text color itself.

Thank you,

javascript jquery css ajax vb.net

Answer 1

Answer №1

I want to express my gratitude to the helpful resource linked below for providing a solution to the problem. After much searching, I finally stumbled upon something that came close to resolving the issue at hand. In an effort to contribute more than just a hyperlink, please take a moment to review the functional code provided below.

Take note of some minor adjustments I made to the code below compared to the original version found in the aforementioned link.

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

When setting up your AutoComplete Extender, use the following parameters....

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

That covers most of it. Some tweaking and troubleshooting were necessary. Notable issues included the incorrect closing javascript tag and the function for retrieving the textbox value not working with e.get_value(), so I opted for e._item.innerText which appears to be functioning correctly.

Original Solution Source

Answer 2

I want to express my gratitude to the helpful resource linked below for providing a solution to the problem. After much searching, I finally stumbled upon something that came close to resolving the issue at hand. In an effort to contribute more than just a hyperlink, please take a moment to review the functional code provided below.

Take note of some minor adjustments I made to the code below compared to the original version found in the aforementioned link.

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

When setting up your AutoComplete Extender, use the following parameters....

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

That covers most of it. Some tweaking and troubleshooting were necessary. Notable issues included the incorrect closing javascript tag and the function for retrieving the textbox value not working with e.get_value(), so I opted for e._item.innerText which appears to be functioning correctly.

Original Solution Source

Modify the color of the text input by the user in an AJAX-enhanced text box

Answer №1

Similar questions

Dynamic content displayed within adjacent div elements

Invoke a PHP function within a Bootstrap Modal using AJAX technology

Is it possible to utilize router.push within Redux thunk? Is this considered a beneficial approach?

A Firefox Browser View of a Next.js and Tailwind Website magnified for closer inspection

Using d3.js to dynamically change the color of svg elements based on their data values

Making an Ajax request to a RESTful web service from a different domain

Grabbing nested JSON Array data using Node.js

Effective methods for importing components in VueJS 2.0

Validation in Angular2 is activated once a user completes typing

The findByIdAndUpdate() function lacks the ability to modify the collection

Utilizing jQuery to determine the placement of a tooltip within a slider

What is the process for dynamically checking in a node in jstree?

What is the best way to position the label above the input text in a Material UI TextField component with a Start Adornment?

Guide on how to retrieve and log a list of objects from a map using Puppeteer, based on elementsArray obtained through the use

The Ajax request fails to set a value within the done callback

Using jQuery to pass an array as part of an object literal for AJAX data transmission

buttons are arranged horizontally, stacked neatly on top of one another

Instructions for creating a scrollable unordered list when it reaches its maximum capacity

The CSS code seems to be ineffective when attempting to center elements with a specific width in react.js

Set up an event listener for when geolocation permission is approved