Live Text Search & Highlight Using jQuery ~ Web Speaks

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;
    }

Live Text Search & Highlight Using jQuery

The HTML Markup

The jQuery Code

The CSS

1 comments: