Ryan Williams.org

The random babblings of a software developer

Fork-me

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

Comments

Peter

ago, Peter said

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

David Miles

ago, David Miles said

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

Animal

ago, Animal said

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:

bc(brush: js). 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:

ranganadh

ago, ranganadh said

nice example

Rowan

ago, Rowan said

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

vikrant

ago, vikrant said

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

vikrant

ago, vikrant said

Figure out the problem for IE-7

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

change the width value to 100% in js file

Anders Rune Jensen

ago, Anders Rune Jensen said

Link to tarball is broken?

Juanito

ago, Juanito said

en ie 7 no funciona mano
dont work in IE 7

smaa

ago, smaa said

plzzzzz can u tell me how to make it read the result from html <p> or <div> tag instead of the text file plzzzzzzzzzzzz

hgdn

ago, hgdn said

hsf

Harshal

ago, Harshal said

Super work. Thanks for sharing.
Just one question, It doesn’t work with jquery 1.4 ?

Marcelo

ago, Marcelo said

Hi. Can any body tell me how I send more parameters to php script? Thanks

Jamie

ago, Jamie said

Does anyone know how to change the position of the popupox? Currently, when I type in the search field, the results load on top of the search field area, not beneath it. Thanks.

Ram

ago, Ram said

Instead of using .txt file for data, i am trying to get data through an ajax call with URL. anyhow i am getting 406 Error. can anyone help me on this.
thanks in advance.
Ram

Add Comment

If you want to add a comment, then simply fill in the form below. All fields are required.