Skip to content

Instantly share code, notes, and snippets.

@oogali
Created December 23, 2011 05:37
Show Gist options
  • Save oogali/1513273 to your computer and use it in GitHub Desktop.
Save oogali/1513273 to your computer and use it in GitHub Desktop.
Really, really easy autocomplete with jQuery + jQuery tmpl
/*
* what's happening here?
*
* 1) define and pre-compile our template that our results should be rendered as
* 2) bind to the keydown event of the input#search text box
* 3) define our callback, to pull json search results every time we're executed
* 4) define a callback for receiving our json data, which does:
* a) remove all previous search results (<h3> tags)
* b) append our new search results to our div#results
*
* XXX: Needs limits and pagination.
*/
$(document).ready(function() {
$.template('resultsTemplate', '<h3><a href = "{{= $data}}">{{= $data}}</a></h3>');
$('#search').live('keydown', function() {
$.getJSON'/path/to/search, { 'search': $('#search').val() }, function(data) {
$('h3').remove();
$.tmpl('resultsTemplate', data).appendTo('#results');
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment