Search Light jQuery Plugin

I needed a nice looking javascript search result script for a site I'm working on and after looking around for a while I couldn't find anything that really did what I wanted. So, I took it upon myself to write a nifty jQuery plugin that does exactly what I want.

The plugin is named Search Light. You can view a demo of it and download it using the links at the end of this post. Please let me know what you think of it.

Screen shot of Search Light

Posted on the 28th July 2009
10 comments

Comments

Leave a comment

  1. Peter – 1 year, 1 month ago

    The position of the popupbox is not correct in Google Chrome 3

  2. David Miles – 1 year, 1 month ago

    Had a check and it works and positions correctly for me in Chrome 2, Opera 9.64, IE 8, Firefox 3 and Safari 3

  3. Animal – 1 year, 1 month ago

    This is the problem with jQuery. Hundreds of clever folks reinventing every wheel in their own way and throwing it into an unsupported, undocumented mix.

    In ExtJs, a simple Ext.form.ComboBox with a custom template can do that:

    
    var c = new Ext.form.ComboBox({
        renderTo: document.body,
        listWidth: 'auto',
        tpl: '<table class="results"><tbody><tpl for=".">' +
            '<tr>' +
                '<td class="results-genre"><tpl if="xindex  1 || parent[xindex - 2].genre ! values.genre">{genre}</tpl></td>' +
                '<td class="results-name"><img src="{icon}">{name}</td>' +
            '</tr>' +
            '<tpl if="xindex &lt; xcount && parent[xindex].genre !== values.genre">' +
                '<tr class="results-spacer"><td class="results-genre"></td><td class="results-name"></td></tr>' +
            '</tpl>' +
        '</tpl></tbody></table>',
        store: new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({
                url: 'sample_data.txt'
            }),
            reader: new Ext.data.ArrayReader({}, [
                'id', 'genre', 'name', 'icon'
            ])
        }),
        mode: 'remote',
        hideTrigger: true
    });

    here:

  4. ranganadh – 11 months, 3 weeks ago

    nice example

  5. Rowan – 11 months ago

    Been looking for something like this for aaaaaages, can’t wait to try it out!

  6. vikrant – 8 months, 2 weeks ago

    It doesn’t work in IE-7. Does anybody know the fix. ?

  7. vikrant – 8 months, 2 weeks ago

    Figure out the problem for IE-7

    if ($.browser.msie && parseFloat($.browser.version) <= 7) { results.css({ width: ’1%’ }); }

    change the width value to 100% in js file

  8. Anders Rune Jensen – 8 months, 2 weeks ago

    Link to tarball is broken?

  9. Juanito – 6 months, 2 weeks ago

    en ie 7 no funciona mano
    dont work in IE 7

  10. smaa – 1 month, 1 week ago

    plzzzzz can u tell me how to make it read the result from html

    or

    tag instead of the text file plzzzzzzzzzzzz