Live Search 2.0

Created Sunday 31st of August 2008 by Andreas Lagerkvist
Copyright © 2008 Andreas Lagerkvist (andreaslagerkvist.com)

What it Does

Use this plug-in to turn a normal form-input in to a live ajax search widget. The plug-in displays any HTML you like in the results and the search-results are updated live as the user types.

How to Use

jQuery('#q').liveSearch({url: '/ajax/search.php?q='}); would add the live-search container next to the input#q element and fill it with the contents of /ajax/search.php?q=THE-INPUTS-VALUE onkeyup of the input.

Example

Example Code

HTML

<div id="jquery-live-search-example">
<
form method="post" action="/search/">

    <
p>
        <
label>
            
Enter search terms<br />
            <
input type="text" name="q" />
        </
label> <input type="submit" value="Go" />
    </
p>

</
form>
</
div>

JS

jQuery('#jquery-live-search-example input[name="q"]').liveSearch({urlRouter.urlForModule('SearchResults') + '&q='});

Source Code

jQuery.fn.liveSearch = function (conf) {
    var 
config jQuery.extend({
        
url:            '/search-results.php?q='
        
id:                'jquery-live-search'
        
duration:        400
        
typeDelay:        200,
        
loadingClass:    'loading'
        
onSlideUp:        function () {}, 
        
uptadePosition:    false
    
}, conf);

    var 
liveSearch    jQuery('#' config.id);

    
// Create live-search if it doesn't exist
    
if (!liveSearch.length) {
        
liveSearch jQuery('<div id="' config.id '"></div>')
                        .
appendTo(document.body)
                        .
hide()
                        .
slideUp(0);

        
// Close live-search when clicking outside it
        
jQuery(document.body).click(function(event) {
            var 
clicked jQuery(event.target);

            if (!(
clicked.is('#' config.id) || clicked.parents('#' config.id).length || clicked.is('input'))) {
                
liveSearch.slideUp(config.duration, function () {
                    
config.onSlideUp();
                });
            }
        });
    }

    return 
this.each(function () {
        var 
input                            jQuery(this).attr('autocomplete''off');
        var 
liveSearchPaddingBorderHoriz    parseInt(liveSearch.css('paddingLeft'), 10) + parseInt(liveSearch.css('paddingRight'), 10) + parseInt(liveSearch.css('borderLeftWidth'), 10) + parseInt(liveSearch.css('borderRightWidth'), 10);

        
// Re calculates live search's position
        
var repositionLiveSearch = function () {
            var 
tmpOffset    input.offset();
            var 
inputDim    = {
                
left:        tmpOffset.left
                
top:        tmpOffset.top
                
width:        input.outerWidth(), 
                
height:        input.outerHeight()
            };

            
inputDim.topPos        inputDim.top inputDim.height;
            
inputDim.totalWidth    inputDim.width liveSearchPaddingBorderHoriz;

            
liveSearch.css({
                
position:    'absolute'
                
left:        inputDim.left 'px'
                
top:        inputDim.topPos 'px',
                
width:        inputDim.totalWidth 'px'
            
});
        };

        
// Shows live-search for this input
        
var showLiveSearch = function () {
            
// Always reposition the live-search every time it is shown
            // in case user has resized browser-window or zoomed in or whatever
            
repositionLiveSearch();

            
// We need to bind a resize-event every time live search is shown
            // so it resizes based on the correct input element
            
$(window).unbind('resize'repositionLiveSearch);
            $(
window).bind('resize'repositionLiveSearch);

            
liveSearch.slideDown(config.duration);
        };

        
// Hides live-search for this input
        
var hideLiveSearch = function () {
            
liveSearch.slideUp(config.duration, function () {
                
config.onSlideUp();
            });
        };

        
input
            
// On focus, if the live-search is empty, perform an new search
            // If not, just slide it down. Only do this if there's something in the input
            
.focus(function () {
                if (
this.value !== '') {
                    
// Perform a new search if there are no search results
                    
if (liveSearch.html() == '') {
                        
this.lastValue '';
                        
input.keyup();
                    }
                    
// If there are search results show live search
                    
else {
                        
// HACK: In case search field changes width onfocus
                        
setTimeout(showLiveSearch1);
                    }
                }
            })
            
// Auto update live-search onkeyup
            
.keyup(function () {
                
// Don't update live-search if it's got the same value as last time
                
if (this.value != this.lastValue) {
                    
input.addClass(config.loadingClass);

                    var 
this.value;

                    
// Stop previous ajax-request
                    
if (this.timer) {
                        
clearTimeout(this.timer);
                    }

                    
// Start a new ajax-request in X ms
                    
this.timer setTimeout(function () {
                        
jQuery.get(config.url q, function (data) {
                            
input.removeClass(config.loadingClass);

                            
// Show live-search if results and search-term aren't empty
                            
if (data.length && q.length) {
                                
liveSearch.html(data);
                                
showLiveSearch();
                            }
                            else {
                                
hideLiveSearch();
                            }
                        });
                    }, 
config.typeDelay);

                    
this.lastValue this.value;
                }
            });
    });
};

Download

Plug-in

Requires

Post a Comment

blog comments powered by Disqus

Random jQuery Plug-ins

  • Text Shadow

    Frankly a rather crappy text-shadow plug-in (can one be done well? :) but nevertheless it does the job in some cases.

    Details

  • View More

    This plug-in allows an element's contents to be hidden untill the user clicks a certain element. It works exactly like the HTML5 details and summary e...

    Details

  • Pixastic Editor

    This app/plug-in inserts a (completely stylable) toolbar next to any image in your document that allows the user to apply different Pixastic-effects ...

    Details

More Plug-ins

Recent Comments

Powered by Disqus