Live Text Search & Highlight Using jQuery

1
In this tutorial I will demonstrate the live text search with JavaScript and jQuery. Sometimes you may want to filter the results on a web page with the specified keyword in a text box. This article will search the results and highlight them according to the user input. The results will be shown in the fancy dropdown list below the textbox. Here is the live demo.


Live Demo Download Script

The HTML Markup

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Live Text Search with JavaScipt | WebSpeaks.in</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<h2>Live Text Search with JavaScript</h2>
<div id="main">
    <div id="text">
        <input type="text" required="" placeholder="Type Java" name="query" id="query">
    </div>
    <div id="result"></div>
<div>
<body>
</html>

The jQuery Code

//The results to be filtered
var results = [];
results[0] = 'jquery';
results[1] = 'json';
results[2] = 'Java Script';
results[3] = 'java';
results[4] = 'java Update';
results[5] = 'javelin';
results[6] = 'James';
results[7] = 'jacob';
results[8] = 'Jail';
results[9] = 'Jailor';

jQuery(document).ready(function(){
    //Search the results
    jQuery('#query').live('keyup', function(event){
        var term = jQuery(this).val();
        var htm = '';
        jQuery('#result').empty().hide();

        //Keys with codes 40 and below are special (enter, arrow keys, escape, etc.), Key code 8 is backspace.
        if(event.keyCode > 40 || event.keyCode <91  || event.keyCode == 8 ||
          event.keyCode == 20 || event.keyCode == 16 || event.keyCode == 9 ||
          event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 ||
          event.keyCode == 40) {
            for(x in results){
                var match = results[x];
                if(match.toLowerCase().indexOf(term.toLowerCase()) != -1){
                    var o = '<b><u>'+term+'</u></b>';
                    var a = match.replace(term, o);
                    htm += '<li>'+a+'</li>';
                }
            }
            var output = '<ol>' + htm + '</ol>';
            if (htm.length > 0) {
                jQuery('#result').show().append(output);
            }
        }
        if(term.length == 0){
            jQuery('#result').empty().hide();
        }
    });

    //Fill the text box on clicking the result
    jQuery('#result ol li').live('click', function(){
        var val = jQuery(this).text();
        jQuery('#query').val(val);
        jQuery('#result').empty().hide();
    });

    //Highlight the results on mouseover
    jQuery('#result ol li').live('mouseover', function(){
        jQuery(this).addClass('focus');
    });
    jQuery('#result ol li').live('mouseout', function(){
        jQuery(this).removeClass('focus');
    });
});

The CSS

body {
        width: 500px;
        margin: auto;
    }
    h2{
        text-align: center;
        font: italic 32px Georgia,"Times New Roman",Times,serif;
    }
    #main {
        background: none repeat scroll 0 0 #9CBC2C;
        border-radius: 5px 5px 5px 5px;
        counter-reset: fieldsets;
        padding: 20px;
        margin: auto;
        width: 400px;
    }
    div#text{
        background: none repeat scroll 0 0 #B9CF6A;
        border-color: #E3EBC3;
        border-style: solid;
        border-width: 2px;
        line-height: 30px;
        list-style: none outside none;
        margin-bottom: 2px;
        padding: 5px 10px;
    }
    input[type="text"] {
        background: none repeat scroll 0 0 #FFFFFF;
        border: medium none;
        font: italic 13px Georgia,"Times New Roman",Times,serif;
        outline: medium none;
        padding: 5px;
        width: 200px;
    }
    #result {
        display: none;
        background: none repeat scroll 0 0 #384313;
        border: medium none;
        color: #FFFFFF;
        font: 12px Georgia,"Times New Roman",Times,serif;
        letter-spacing: 1px;
        margin: auto;
        margin-top:-1px;
        position: absolute;
        padding: 7px 0px;
        text-shadow: 0 1px 1px #000000;
        width: 225px;
    }
    #result ol {
        margin: 0px;
        padding-left: 20px;
        padding-right: 20px;
        list-style: none;
    }
    #result ol li{
        padding: 5px;
    }
    #result ol li.focus{
        background: none repeat scroll 0 0 #1E2506;
    }

Written by Arvind Bhardwaj

Arvind is a certified Magento 2 expert with more than 10 years of industry-wide experience.

Website: http://www.webspeaks.in/

One thought on “Live Text Search & Highlight Using jQuery”

Comments are closed.