Search and Filter Array in JavaScript

-

 

Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain that how to search and filter array in Javascript

Code for HTML  Page

On the HTML page there will be Two Controls, one is text box with the id named txt_filter for to enter the input by the user and this text box is assigned with onkeyup event handler. And other one control is Span with the id named lbl_output for displaying the filtered records

<input type="text" onkeyup="Filter(this.value)" id="txt_filter" />

<br />

<span id="lbl_output"></span>

Search and Filter Array in JavaScript

There will be Filter JavaScript function is called in the window.onload and TextBox onkeyup event handler,.

Filter JavaScript function

FOR loop will executed in the Array an Array of names is defined Inside the Filter Javascript function

Inside the Filter Javascript function, and a FOR loop is executed over it.

Then, inside the FOR loop, a condition is performed for checking whether the Array index is not equal to -1 then Array will be copied inside another one Array named filterArr.

After this, a check is performed if the Array length is greater than 0 then filtered result will be shown in the HTML SPAN control.

Below i am giving complete code for the HTML page. You can copy and paste complete code inside the HTML page for execute the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

        body { font-family: Arial; font-size: 10pt; }

    </style>

    <script type="text/javascript">

        window.onload = function () {

            Filter("");

        };

 

        function Filter(value) {

            var arr = [

                "Bharat Bhushan",

                "Sanjeev Kumar",

                "Nancy Kohli",

                "Ruhika",

                "Danish Verma",

                "Micheal Mike",

                "Sachin Verma",

                "Nishant Malhotra",

                "Harry Sharma",

                "Aman Salotra"

            ];

 

            var filterArr = [];

            for (var i in arr) {

                if (arr[i].toLowerCase().indexOf(value.toLowerCase()) != -1) {

                    filterArr[filterArr.length] = arr[i];

                }

            }

 

            if (filterArr.length > 0) {

                document.getElementById("lbl_output").innerHTML = filterArr.join("<br />");

            } else {

                document.getElementById("lbl_output").innerHTML = "No matches!";

            }

        }

    </script>

</head>

<body>

    <input type="text" onkeyup="Filter(this.value)" id=" txt_filter " />

    <br />

    <span id=" lbl_output "></span>

</body>

</html>

Conclusion: In above code, I explained that how to search and filter array in Javascript. This code is very helpful for every developer. Bye Bye and take care of your Developers. We will come back shortly with the new article.

 

Regards

Using Asp.net

 

Comments

Post a Comment

Popular posts from this blog

Sending reset password link for one time use only in asp.net

-
Introduction: Hello developers, in this article i will explain that how we can create and send reset password link that will use onle one time in asp.net,after one time use this link will dispose and say that this link is wrong. This is very helpful article for every .net developer Implementation: Create two pages named forgetpassword.aspx and reset.aspx. Paste the code that below am giving, separately inside the both pages. This is a sample program you can change it accoring to your requirement. Inside your table there will be a colimn named code is necessary. Code for forgetpassword.aspx page: < head runat ="server">     < title > Forget Password </ title >     < style type ="text/css">         .style1         {             width : 100% ;  ...
Read more

add delete update inside gridview using store procedure in ASP.NET

-
Image
Introduction: Hello friends, in this article i will explain that how we can insert,delete,update the data in the gridview. Here i am using the store procedure to insert,delete and update the record. With the help of the store procedure the execution of the sql  query make fast. And less  the code of the aspx.cs page. So we can say  the use of the store procedure in the sql server is very important and also very helpful. Implementation: create a new website abb a page named gallery.aspx. Drag and drop the two textboxes, a fileuploader and a button from the toolbox named txt_album_name, txt_caption, fileuploader1 and btn_insert respectively. Here i am giving the complete code for the html page.  Code for .aspx page: < table class ="style1">         < tr >             < td class ="style2">      ...
Read more

Change password using asp.net

-
Image
Introduction : Hello friends, in this article i will explain that how we can change the password after login, in asp.net.This article is very useful for the all the .net developer. Implementation : create a new website add a page. Drag and drop three textboxes and two buttons   from the toolbox inside the   < body > body tag at the .aspx page.   Below   i am giving the complete code for the html page and .cs page.  Code for default.aspx page < div >     < table style =" width : 91% ; height : 97px ; " class ="tbl_reg_form">         < tr >             < td >                 Old Password </ td >             < td >        ...
Read more