BBSearch

BBSearch is a JS plugin to transform an input field in an auto-search element based on Backbone.

• BBSearch's code
• BBSearch's demo page
• BBSearch's README

Demo page: play with the examples

Use

new BBSearch({
  // (Required) the query will be added at the end of the url
  // you can also use the "#bbsearch-query#" placeholder to insert the query
  // in any part of the url
  url: "http://myapi.server.com/search.json?q=",

  // (Required) reference to the user input field
  inputElement: $("#my-input"),

  // (Required) reference to the DOM element when the search results will be shown
  resultsElement: $("#my-results"),

  // (Required) UnderscoreJS style template
  itemTemplate: "title: <%= title %>",

  // handler for a _click_ in one of the elements
  // a reference to the actual Backbone.Model will be sent
  onClick: function( model ){ $("#my-input").val( model.get( "text" ) ) },

  // handler to be called when the search request start
  onStart: function(){ $("#loading").show();},

  // handler to be called when the search request ends
  // and all the elements have been rendered
  onEnd: function( collection ){ $("#loading").hide(); },

  // in case your search response has especial _parse_ needs
  parse: function( response ){ return response.results; },
});

new BBSearch({
  url: "https://api.github.com/legacy/repos/search/#bbsearch-query#?callback=?&",
  inputElement: $("#search-input-1"),
  resultsElement: $("#results-1"),
  itemTemplate: '
[@<%= owner %>] <%= name %>
',
  parse: function( response ){ return response.data.repositories; }
});

Example 2 (styled/events): Twitter Search API

This remote-auto-search element is connected to Twitter search API. Write any text on it and wait for results. The results are clickable and the twitt will be setted at the input field.

Code toggle

new BBSearch({
  url: "http://search.twitter.com/search.json?callback=?&q=",
  inputElement: $("#search-input-2"),
  resultsElement: $("#results-wrapper-2 > .results"),
  itemTemplate: $("#template-result").html(),
  onClick: function( model ){
    $("#search-input-2").val( model.get( "text" ) )
  },
  onStart: function(){
    $("#results-wrapper-2").slideUp( "fast" );
    $("#loading img").show();
  },
  onEnd: function( collection ){
    if( collection.length > 0 ) $("#results-wrapper-2").slideDown( "slow" );
    $("#loading img").fadeOut( "fast" );
  },
  parse: function( response ){
    return response.results;
  },
});