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

Adding a Fictitious Pair to a JavaScript Object Literal

Building a multilingual website using AngularJS UI-Router

What are the appropriate levels of access that an operating system should provide for web-based scripting?

I'm wondering how I can design a utility function within my Redux module that can extract a specific subset of read-only data from the current state

What steps can be taken to turn off specific warning rules for CSS mode in ACE editor?

Tips for looping through client.get from the Twitter API with node.js and express

The conversion of a 2D json array into a string is mistakenly performed

Node-modules CSS

Updating an Object in vue.js Upon Click Event to Add a New Value

Creating a Validation Form using either PHP or JavaScript

When a button is clicked within a partial view, it will redirect to the parent action

Limit text to two lines inside a cell in a table

Transform JSX into JSON or a string, then reverse the process

What is the rationale behind placing the CSS outside of the React function components, near the imports?

Invoking a PHP function within a JavaScript file

Tips for enhancing contrast in MUI dark theme modals

The absence of the 'Access-Control-Allow-Origin' header is reported even though it is actually present

Display the Ajax response in a designated div

strategies for chaining together multiple observables with varying data types and operations

Executing JavaScript code from an external link