Search and Filter Array in JavaScript

This is a short code snippet article where I am describing how to filter array client side in JavaScript.

JavaScript Snippet

Below is the snippet that filters the JavaScript array of strings based on the text typed in the textbox. The filtered results are displayed in HTML span dynamically as you type.

You are reading MyCodeLogic

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

<head>

<title></title>

<script type="text/javascript">

    var arr = ["Ana Trujillo",

        "Antonio Moreno",

        "Thomas Hardy",

        "Christina Berglund",

        "Hanna Moos",

        "Frédérique Citeaux",

        "Martín Sommer",

        "Laurence Lebihan",

        "Victoria Ashworth",

        "Janine Labrune"];

    function Filter(value) {

        var filterArr = [];

        for (var i in arr) {

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

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

            }

        }

        var result = "";

        for (var i in filterArr) {

            result += filterArr[i] + "<br />";

        }

        if (result != "") {

            document.getElementById("lblResult").innerHTML = result;

        } else {

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

        }

    }

    window.onload = function () {

        Filter("");

    };

</script>

</head>

<body>

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

<span id="lblResult"></span>

</body>

</html>

Downloads

You are reading MyCodeLogic

You can download the sample source code using the download link provided below.

FilterArrayInJavaScript.zip

[Read More...]

Highlight Form Fields like Textbox, Dropdown and TextArea on focus using jQuery

The below code snippet explains how to highlight form fields like HTML input textbox, input password, select dropdown and textarea on focus using jQuery and CSS.

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

<head>

<title></title>

    <style type = "text/css">

        .focus{border: 1px solid #FFB000;outline: none;}

        .blur{border: 1px solid #CCCCCC;outline: none;}

    </style>

</head>

<body>

<form>

    <script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    <script type = "text/javascript">

        $(function () {

            $("input[type=text], input[type=password], textarea, select").each(function () {

                $(this).addClass("blur");

                $(this).focus(function () {

                    $(this).removeClass("blur").addClass("focus");

                });

                $(this).blur(function () {

                    $(this).removeClass("focus").addClass("blur");

                });

            });

        });

    </script>

    TextBox: <input type = "text" /><br /><br />

    Password: <input type = "password" /><br /><br />

    Textarea: <textarea cols = "5" rows = "10"></textarea><br /><br />

    Select:

    <select>

    <option>Please select</option>

    <option>Female</option>

    <option>Male</option>

    </select>

</form>

</body>

</html>

Explanation:

Above I have created 2 CSS classes in Style Tags in the HEAD section 

- focus (will be applied when the HTML control  has focus)

- blur (will be applied when the HTML control  has focus)

Next I am executing an each loop on all the form fields (input[type=text],input[type=password], textarea, select) in the load event of the page. In the loop I have attached focus and blur events to the HTML form fields. In these events I simply add and remove the focus and blur CSS classes so that when a control is focused it is highlighted and when it loses focus it should get back to normal.

The above CSS only changes the color of the border. But you can modify it as per your needs by simply editing the two CSS classes.

Demo:

TextBox:

---

[Read More...]

Get Client Machine IP Address using JQuery and JSON

The below code snippet explains how to get IP Address of the client machine using JSON and jQuery

<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">

    $(function () {

        $.getJSON("http://jsonip.appspot.com?callback=?", DisplayIP);

    });

    function DisplayIP(response) {

        $("#ipaddress").html("Your IP Address is " + response.ip);

    };

</script>  

<span id = "ipaddress"></span>

 

Explanation:

Above in the document ready event of the HTML page I am executing the jQuery getJSON  method which internally makes a JSON call tohttp://jsonip.appspot.com  which is a free web service that determines and returns the IP Address of the machine making the request.

I have also specified a callback function which is executed when the response is received and it displays the IP address in the HTML span with ID ipaddress

[Read More...]