JavaScript and CoffeeScript for autocomplete input fields with ajax request and json.

autocomplete.js

/**
 * Miscellaneous JavaScript for autocomplete input fiels with ajax request and json.
 *
 * @namespace Belanton.Codes.Scripts
 * @see       https://gist.github.com/leonardomarques/6970e7d86409f35bb3fd
 * @author    Leonardo Marques <leonardo.marques@belanton.com>
 * @license   Licensed under the MIT license [http://www.opensource.org/licenses/mit-license.php]
 * @copyright Copyright (c) 2013 Belanton, Inc. [http://www.belanton.com]
 */

$(function() {
  function log( message ) {
    $( "<div>" ).text( message ).prependTo( "#log" );
    $( "#log" ).scrollTop( 0 );
  }

  $( "#city" ).autocomplete({
    source: function( request, response ) {
      $.ajax({
        url: "http://gd.geobytes.com/AutoCompleteCity",
        dataType: "jsonp",
        data: {
          q: request.term
        },
        success: function( data ) {
          response( data );
        }
      });
    },
    minLength: 3,
    select: function( event, ui ) {
      log( ui.item ?
        "Selected: " + ui.item.label :
        "Nothing selected, input was " + this.value);
    },
    open: function() {
      $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
    },
    close: function() {
      $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
    }
  });
});

// OR

$('.typeahead').typeahead({
  source: function (query, process) {
    return $.get('/typeahead', { query: query }, function (data) {
      return process(data.options);
    });
  }
});

// OR

$("input[data-provide=typeahead]").typeahead({
  source: function(query, process) {
    return $.get("/profiles/companies.json", {
      query: query
    }, function(data) {
      return process($.map(data, function(o) {
        return o["namename"];
      }));
    });
  }
});

autocomplete.js.coffee

###
 # Miscellaneous CoffeeScript for autocomplete input fiels with ajax request and json.
 #
 # @namespace Belanton.Codes.Scripts
 # @see       https://gist.github.com/leonardomarques/6970e7d86409f35bb3fd
 # @author    Leonardo Marques <leonardo.marques@belanton.com>
 # @license   Licensed under the MIT license [http://www.opensource.org/licenses/mit-license.php]
 # @copyright Copyright (c) 2013 Belanton, Inc. [http://www.belanton.com]
###

$ ->
  log = (message) ->
    $("<div>").text(message).prependTo "#log"
    $("#log").scrollTop 0
    return
  $("#city").autocomplete source: (request, response) ->
    $.ajax
      url: "http://gd.geobytes.com/AutoCompleteCity"
      dataType: "jsonp"
      data:
        q: request.term

      success: (data) ->
        response data
        return

    return

  return

# OR

$(".typeahead").typeahead source: (query, process) ->
  $.get "/typeahead",
    query: query
  , (data) ->
    process data.options

# ---

$(".typeahead").typeahead source: (query, process) ->
  $.get "/typeahead", query: query, (data) ->
    process data.options

# OR

$("input[data-provide=typeahead]").typeahead source: (query, process) ->
  $.get "/profiles/companies.json",
    query: query
  , (data) ->
    process $.map(data, (o) ->
      o["namename"]
    )