Search and highlight in json data

Jquery based search box which search's in json data and highlight the results

by dshilkret

HTML

<div class="container">
    <div class="col-md-4">
        <form id="search" class="navbar-form" role="search">
            <div class="input-group form-inline">
                <label>Search By -
                    <select name="searchBy">
                        <option value="name">Name</option>
                        <option value="occupation">Occupation</option>
                        <option value="hometown">Home town</option>
                    </select>
                </label>
                <input type="text" class="form-control" placeholder="Type somthing and hit enter" name="srch-term" id="srch-term" />
            </div>
        </form>
<pre id="result_details"></pre>

        <ul id="list"></ul>
    </div>
</div>

CSS

.container {
            width: 600px;
            margin-top: 20px;
        }
        span {
            display:block;
            line-height: 1.4
        }
        li {
            margin:10px 0;
            list-style:none;
            background: #eee;
            padding:10px;
        }
        ul {
            margin:0;
        }
        input[type="text"] {
            margin-left: 10px;
        }

JavaScript

var json = {
    peoples: [{
        name: "Johny doe",
        occupation: "Web designer",
        hometown: "New york"
    }, {
        name: "Mark Davis",
        occupation: "Photographer",
        hometown: "Germany"
    }, {
        name: "Susan White",
        occupation: "Seo executive",
        hometown: "Greenland"
    }, {
        name: "Joseph Groce",
        occupation: "PHP developer",
        hometown: "Australia"
    }, {
        name: "Mohammad Wali",
        occupation: "Web developer",
        hometown: "India"
    }, {
        name: "Eddie Blom",
        occupation: "Web designer",
        hometown: "New york"
    }, {
        name: "John Anderson",
        occupation: "Graphic designer",
        hometown: "New york"
    }, {
        name: "Helen Nelson",
        occupation: "Web developer",
        hometown: "Australia"
    }]
};

function setData(peoples, issearch) {
    var issearch = (typeof issearch != "undefined") ? issearch : false;
    if (peoples.length > 0) {
        var data = "";
        for (var i = 0; i < peoples.length; i++) {
            person = peoples[i];
            list = "<li><span>Name: " + person.name + "</span>\
    <span>Occupation: " + person.occupation + "</span>\
    <span>Hometown: " + person.hometown + "</span>\
    </li>";
            data += list;
        }
    } else {
        data = "<li style='text-align:center'>Wopps, nothing found!</li>";
    }
    if (issearch === true) {
        $("#result_details").show().html((peoples.length) + " Results found (<a href='#' id='clear_search'>Clear search results</a>)")
    } else {
        $("#result_details").hide()
    }
    $("ul#list").html(data)
}
$.fn.highlight = function (word) {
    return this.html(function () {
        return $(this).text().replace(RegExp(word, 'gi'), '<mark>$&</mark>');
    });
};

function search(search_query, data) {
    var results = [];
    var searchby = $("form select[name=searchBy]").val() || "name";
    $.each(data, function (i,...