Refine radio button list based on input typed in text box

How can I filter my checkbox list based on letters typed into a textbox? The data for my checkbox list comes from a database. I attempted to do this using JavaScript, but it's not working. Is there a better way to achieve this functionality?

<asp:TextBox ID="locationFilter" placeholder="Search Area" CssClass="locator filter-text" runat="server"></asp:TextBox>

<asp:RadioButtonList ID="areasList" ClientIDMode="Static" autocomplete="off" CssClass="mark" AutoPostBack="true" runat="server" RepeatLayout="Flow">
</asp:RadioButtonList>

<script>
$(function() {
    $('#locationFilter').on('keyup', function() {
        var query = this.value;     
        $('[id^="areasList"]').each(function(i, elem) {
              if (elem.value.indexOf(query) != -1) {
                  $(this).closest('label').show();
              }else{
                  $(this).closest('label').hide();
              }
        });
    });    
});
</script>

Answer №1

Due to being a server control, the TextBox will generate a unique id in the browser. Check out the functional script below:

<script>
    $(function () {
        $('input[id $= "locationFilter"]').on('keyup', function () {
            var query = this.value;

            $('input[id ^= "areasList"]').each(function (i, elem) {
                var radioButton = $(this);
                var show = radioButton.val().indexOf(query) != -1;
                radioButton.toggle(show);
                var label = radioButton.next('label');
                label.toggle(show);
                label.next('br').toggle(show);
            });
        });

    });
</script>

Answer №2

Revise to the following,

$(function () {
    $('#locationFilter').on('keyup', function () {                                                        
        var searchText = this.value;

        $('#areasList input[type=radio]').each(function (index, element) {
            if (element.value.indexOf(searchText) != -1) {
                $(this).show();
                $(this).next('label').show();
            } else {
                $(this).hide();
                $(this).next('label').hide();
            }
        });
    });
});

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

Tracking User IDs across different domains with Piwik: a step-by-step guide using PHP and JavaScript

Is there a way to connect the IP address of the current visitor to a specific user ID using PHP in Piwik tracking, and ensure this connection is maintained across multiple (sub)domains? I have multiple (sub)domains and I want to assign a unique UserID to ...

What steps should I follow to bring in an animated SVG file into Next.js 13 without losing transparency and animation effects?

How to Include an Animated SVG File in Next.js 13 import Image from "next/image"; export default function Home() { return ( <main className="flex h-screen flex-col items-center"> <div className="container mt-1 ...

CSS file not loading in an ExpressJS application

I'm facing an issue with my ExpressJS web app where only the HTML files are loading but the CSS rules are not being applied. I have linked the HTML file with the CSS file and also included express.static(path.join(__dirname, 'css')) in my ap ...

Execute the function when the form is submitted and show the total of the two values

I am currently working on a straightforward custom module for Drupal 7. This module takes two numeric values and upon submission, displays the sum of these values on the same page. While I have the form set up, it is not yet complete. I am facing some dif ...

Is there an effective way to merge two collections?

I came across an issue where I am attempting to merge two arrays that resemble the ones listed below: var participants = [ {id: 1, name: "abe"}, {id:2, name:"joe"} ]; var results = [ ...

Utilizing ReactJS useState to eliminate a className

Basically, I'm trying to remove a className from an element when a button is clicked. I've attempted to use useState hooks and a regular function, with the onClick event on the button triggering this function/setUseState. However, the className l ...

Passing VB6 .Net Interop: Passing a .Net Date property to a VB6 function by reference does not update the value

My current project involves a hybrid VB6 (entry point) to .Net application. Within my .Net code, there is a class that includes Date properties (Date1-Date4) which are exposed and COM Visible for use in the VB6 code. In the VB6 code, there exists a metho ...

Is your JQuery Gallery experiencing issues with the next button function?

I'm working on developing a simple gallery using JQuery. The main concept is to have all image files named x.png (where x is a number), and the program will then add a number to the current one, creating x+1.png and so forth. Here's the code I ...

Directus | The Revision is not being updated when a collection is created in Flows

I am currently working with the latest version 9 of Directus. I have set up a Data Model called "Article" with fields for title and Random_order. https://i.sstatic.net/3JcZ4.png https://i.sstatic.net/bRpBF.png I have created a Directus flow that upda ...

I am encountering difficulties while attempting to import Typescript files. Upon compiling them into Javascript, I am faced with errors in the web browser, specifically the issue of "exports is not defined"

When I run TodoAppUI.js:15, I get an error saying "Uncaught ReferenceError: exports is not defined" In all my classes, I use the export keyword. For example: export class mysclass { public constructor(){} } Even though I have the proper syntax for impo ...

Transforming vanilla JavaScript into jQuery

Is there a more efficient way to write this code using jQuery? It's functioning properly in Firefox but not in Safari or Chrome without any error messages, making it difficult for me to troubleshoot. Any suggestions or insights would be greatly appre ...

Oops! There seems to be a problem with your AngularJS/JavaScript code. The error message is "Uncaught ReferenceError:

As I venture into the world of AngularJS and JavaScript, I am working on creating a 'blog' using these technologies. Here is my HTML view code- <div ng-controller="Controller1"> <form ng-submit="sub()" role="form"> Title: <textar ...

Error: Method not found in the system

Within my project, I have a collection of user controls stored in a folder called UserControls. I have implemented one of the user controls from that folder on my master page and another on Default.aspx. The Default.aspx page utilizes the master file. Pr ...

Angular Date of Birth Verification

I'm new to Angular and struggling with date handling. I have a form that includes fields for the user's name and their date of birth. Before submitting the form, I need to validate that the person is over 18 years old and display an error messag ...

jQuery form validation issue, unresponsive behavior

<!DOCTYPE html> <html> <head> <title> jquery validation </title> </head> <body> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js" type="text/javascript"> ...

Using AJAX to handle 404 errors in Slim PHP

When I attempt to retrieve data using AJAX in my Slim PHP application, I am encountering a 404 (Not found) error in the console. The specific error message is as follows: http://localhost:8888/Project/mods/public/edit-mod/ajax/get-categories?gameID=1 404 ...

Redirecting to a new page in JavaScript as the clock nears the top of the hour after 5 minutes

I am looking to automatically redirect a user to another page when it is 5 minutes until the start of the next hour. In military time (24-hour clock), this means I want the redirect to occur at times like... 11:55 12:55 13:55 14:55 15:55 etc So far, I ...

Eliminate incorrect or invalid state when resetting a dropdown in an Angular ng-select component

I have integrated the ng-select plugin into my Angular project for handling dropdowns. One specific requirement I have is to reset the second dropdown when the first dropdown is changed. Below is a snippet of the code: <ng-select [items]="branchMo ...

Can Sync blocking IO be implemented solely in JavaScript (Node.js) without the use of C code?

Is JavaScript intentionally designed to discourage or disallow synchronous blocking I/O? What is the reason for the absence of a sleep API in JavaScript? Does it relate to the previous point? Can browsers support more than one thread executing JavaScript? ...

encountering a problem integrating react-dropzone into a project using react-16.13.1

I'm having an issue adding the package https://www.npmjs.com/package/react-dropzone to my TypeScript React project using Yarn as the package manager. I ran the command yarn add @types/react-dropzone, but it ended up installing a deprecated package h ...