[Answer]-Search box inside a div. Django

by

1👍

✅

As suggested, it’s pretty easy with jQuery. Here is a straight forward example:

HTML

<input id="searchbox" type="text" placeholder="Search" />
<ul id="friendlist">
    <li>Bob</li>
    <li>John</li>
    <li>Peter</li>
    <li>Paul</li>
    <li>Adam</li>
</ul>

JavaScript

// case insensitive ':contains' selector
jQuery.expr[':'].Contains = function(a, i, m) {
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

$(function() {
    $('#searchbox').on('keyup', function() {
        var w = $(this).val();
        if (w) {
            $('#friendlist li').hide();
            $('#friendlist li:Contains('+w+')').show();
        } else {
            $('#friendlist li').show();                  
        }
    });
});​

We need to define the case insensitive :Contains selector since jQuery’s built-in :contains is case sensitive and that’s probably not what you want.

Here is a working jsFiddle.

As a web developer you should definitely take a closer look at jQuery. You always need it.

👤j0ker

Leave a comment