Question

With out making a database backend, is it possible to somehow create a search box on an html / css page, probably with jquery for everything, that say I have four div boxes on the page, and each div box contains certain flavor text or keywords. Is it possible to make a search box that when a keyword is searched for, it then hides the other div boxes that don’t contain that keyword, and then shows only those that do.

I am aware and know of .hide / .show /.toggle in jquery, but how would one begin to code a simple search box that would perform that kind of functionality? Anyone have any ideas or general direction?

Answer 1

$("#search").on("keyup", function() {
    var key = this.value;
    $(".tosearch").each(function() {
       var $this = $(this);
       $this.toggle($(this).text().indexOf(key) >= 0);
    });
});

Demo: http://jsfiddle.net/upsgk/

Note that this performs a case-sensitive search. To ignore case you’ll need a couple of calls to toLowerCase(). E.g. http://jsfiddle.net/upsgk/1/