Find and locate items in a checklistbox by typing text into a textbox

I need a search function inside a checklist box. The idea is that when a user types text into a text field, if that particular item exists in the checkbox list, it should automatically be selected.

HTML:

<asp:TextBox ID="TextBox1" runat="server" OnTextChanged= "return SearchList();"/>
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
    <asp:ListItem>Vincent</asp:ListItem>
    <asp:ListItem>Jennifer</asp:ListItem>
    <asp:ListItem>Shynne</asp:ListItem>
    <asp:ListItem>Christian</asp:ListItem>
    <asp:ListItem>Helen</asp:ListItem>
    <asp:ListItem>Vladi</asp:ListItem>
    <asp:ListItem>Vinz</asp:ListItem>
    <asp:ListItem>Churchill</asp:ListItem>
    <asp:ListItem>Rod</asp:ListItem>
    <asp:ListItem>Mark</asp:ListItem>
</asp:CheckBoxList>

JavaScript:

function SearchList() {
    try {
        var l = document.getElementById('<%= CheckBoxList1.ClientID %>');
        var tb = document.getElementById('<%= TextBox1.ClientID %>');
        var p = l.item.length
        if (tb.value == "") {
            ClearSelection(l);
        } else {
            for (var i = 0; i < l.options.length; i++) {
                if (l.options[i].value.toLowerCase().match(tb.value.toLowerCase())) {
                    l.options[i].selected = true;
                    return false;
                } else {
                    ClearSelection(l);
                }
            }
        }
    } catch (e) {}
}

function ClearSelection(lb) {
    lb.selectedIndex = -1;
}

Answer №1

I have limited knowledge on asp, but I am eager to learn the basics through simple HTML.
Hopefully, this information will be useful for you.
HTML Section

<select id="combo">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<br>
<input type="text" id="searchTXT" onblur="checkCombo();">

Javascript Section

function checkCombo() {
    try{
        var searchVal = $('#searchTXT').val();
        var options= document.getElementById('combo').options;
        for (var i= 0, n= options.length; i < n ; i++) {
        if (options[i].value.toLowerCase()==searchVal.toLowerCase()) {
            document.getElementById("combo").selectedIndex = i;
            break;
        }
    }
    }
    catch(e){}
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize JavaScript to parse JSON response data, calculate the average of a specified field while keeping track of

The data returned from the API call is structured as follows: var array = {"scores":[ { userid: "1", mark: 4.3 }, { userid: "1", mark: 3.8 }, { userid: "2", mark: 4.6 }, { userid: "2&quo ...

The function called Nuxt: n2 is not defined

When using Nuxt 3, I encountered a TypeError that looks like the following: Uncaught TypeError: n2 is not a function My issue revolves around a button that triggers the function toggleSelectRow with a @click.prevent directive. The function in question is ...

Transferring information between pages through ajax communication

I am working with two pages named testing.php and submission.php. My goal is to send data from testing.php to be displayed on submission.php. For example, when a user clicks on test1, they should be directed to submission.php where I want to display the te ...

Tips for managing serverside validation and clientside validation in your web application

Utilizing both clientside and serverside validation in ASP.NET controls is crucial for ensuring usability and security. While simple validations like length checks or regular expressions are easy to implement and maintain, more complex validations can beco ...

How to visually represent options without labels using icons in Material UI Autocomplete

My options are structured as follows: const options = ['option1', 'option2']; I am looking to display the options with icons like this: https://i.stack.imgur.com/aubHS.png The current code for rendering options looks like this: ...

Stay connected with AJAX's latest updates on Twitter with just 13 bytes

Twitter sends a POST request of only 13 bytes when someone follows an account. This small amount of information helps to reduce latency and server load, providing advantages for web developers. However, removing unnecessary cookies and extra information f ...

Experiencing difficulties with the createClient function

Let me explain how my code functions: in the index.js file, a discord bot stores usernames and passwords. When I send a request to the minecraft file using minecraft-protocol, it establishes a login to a server named Client. clientName = mc.create ...

Unable to group the array based on the key value using Jquery or Javascript

I am looking to group my array values based on specific key values using Jquery/Javascript, but I am facing issues with my current code. Let me explain the code below. var dataArr=[ { "login_id":"9937229853", "alloc ...

Prevent duplicate entries in a JavaScript key-value data structure

Seeking advice from a novice. I am working on a project where I need to create a list with a Key/Value structure. I have assigned the Id as the Key and the rest of the information as the value, so as I add more records, they get appended to my list $scope ...

Launch a fresh tab using Chrome's extensions feature

Currently, I am in the process of developing a Google extension that will search for selected text on Google when the user clicks "ctrl+alt+x". Here is the mainfest for the extension: { "name": "A jQuery Chrome extension", "version": "0.1", "descri ...

Comparing AngularJS Style Guides: Insights from Todd Motto, John Papa, and Minko Gechev

As someone new to Angular, I am eager to establish good practices right from the start. I have discovered three compelling Angular style guides, each with its own strengths. However, since I lack experience with large Angular applications, I find myself un ...

Having trouble with querying specific items using node-mysql and JavaScript

p_info_query('SELECT * FROM ' + <table> + ' WHERE name = ' + user_name, password, client_connect.id, p_info, function(results) { I keep getting an error about an Unknown Column 'user_name' when trying to run this query. ...

Can you please explain the meaning of "!" in JavaScript as it pertains to my explanation?

I comprehend how the exclamation mark is used in code such as != or !==, but I am curious about its meaning when it precedes something like if(!arr[i]){"do this} Appreciate your response. ...

Click to slide the div down and up when needed

Currently, I am utilizing the code below to implement a slide up/down effect on a div using JavaScript. The slide down action is triggered by a button, while the slide up action is associated with a close text. My goal is to have the button toggle betwee ...

Implementing Jquery to Identify the Matching Indices of Two Arrays

I need to find the indices of similar values in array1 and array2, and then save them in a variable named stored_index. array1 = ["50","51","52","53","54","55","56","57","58","59"]; array2 = ["59","55","51"]; The desired result for stored_index is: sto ...

What is the best approach for overlaying random meshes onto a terrain using a heightmap in three.js?

I'm interested in plotting randomly generated meshes at the y-position that corresponds to the terrain's height in three.js. While browsing through the documentation, I came across the raycaster method, which seems like it could be useful. Howeve ...

Running Applications with React Using Command Line Interface (CMD)

I'm currently working on creating a .cmd file to handle the installation of dependencies and then execute my React application. Following some research, I have come up with the following code snippet inside my .cmd file: @echo off npm install pause np ...

Is there a Wordpress floating bar similar to the one seen on 9gag?

After browsing through some posts on stackoverflow, I noticed that my website is not responding as expected. You can check out my site here: To troubleshoot, you can examine the source code and utilize Firebug to inspect the css and javascript being used ...

In my Vue project, I am required to extract only the numerical value from a select option text and disregard the rest of the text

Currently, I am in the process of learning Vue and have taken on the task of creating a basic tax calculator. The challenge is to display the result in real-time without requiring a "show total value" button. Everything seems to be functioning well except ...

Transforming jQuery into pure Javascript code

UPDATE SUCCESS! I've cracked the code. The solution was to include jQuery by adding it in Joomla through the template/index.php file with this line under "//Add Javascript Frameworks" JHtml::_('jquery.framework');. PROGRESS I'm seekin ...