How can I use typeahead.js with Zepto.js

Question

Twitter's typeahead.js has a dependency on jQuery 1.9 (documentation), but Zurb Foundation 4 will attempt to load Zepto.js in modern browsers. Without jQuery 1.9 loaded typeahead.js will throw an error ($.deferred is not defined), show what changes need to be made to make these two libraries work together?

Answer 1

For this I am using the default Zepto 1.0, and typeahead.js 0.9.3 (which are the current released versions as of the time I wrote this)

The first error thrown is practicably not the last issue you will encounter, but here is what I did to get it working (along with the CSS I added to make it look like it belonged in Foundation 4). First to add the missing deferred support I included simply-deferred. Once Zepto.js and simply-deferred are loaded you will need to add this line to make simply-deferred behave like jQuery:

Deferred.installInto(Zepto);

Then you will need to make 2 changes to typahead.js, the first (at line 328), the original function to fetch remote data uses the jQuery pattern .$(ajax(url, {options}) and looks like this:

var that = this, jqXhr = pendingRequests[url];
if (!jqXhr) {
  incrementPendingRequests();
  jqXhr = pendingRequests[url] = $.ajax(url, this.ajaxSettings).always(always);
}

To make this work Zepto (who's $.ajax() function takes only one argument and includes the URL as part of the {options} object) change the code to look like this:

var that = this, jqXhr = pendingRequests[url], ajaxOptions = {'url': url};
if (!jqXhr) {
  incrementPendingRequests();
  $.extend(ajaxOptions, this.ajaxSettings);
  jqXhr = pendingRequests[url] = $.ajax(ajaxOptions).always(always);
}

This approach works in both Zepto and jQuery. Then at the bottom of typaeahead.js there are two hard coded references to jQuery that look like this:

    jQuery.fn.typeahead = function(method) {
      if (methods[method]) {
        return methods[method].apply(this, [].slice.call(arguments, 1));
      } else {
        return methods.initialize.apply(this, arguments);
      }
    };
  })();
})(window.jQuery);

This is easily changed to the more compatible:

    $.extend($.fn, {
      typeahead: function(method) {
        if (methods[method]) {
          return methods[method].apply(this, [].slice.call(arguments, 1));
        } else {
          return methods.initialize.apply(this, arguments);
        }
      }
    });
  })();
})(window.$);

Finally, because typeahead.js adds some markup to the DOM when it initializes this messes with some of the foundation.css, to counter act it (and to style the HTML that it creates so that it looks like it fits better with Foundation) I added this CSS:

span.tt-dropdown-menu {
  background-color: #fff;
  border: 1px solid #ccc;
  margin-top: -15px;
  width: 100%;
}
div.tt-suggestion.tt-is-under-cursor {
  background-color: #ccc;
}
div.tt-suggestion > p {
  margin: 0;
  line-height: 35px;
}
span.twitter-typeahead {
  width: 100%;
}

I hope this saves someone else the time it took me to sort out :)

Answer 2

a light-weight zepto autocomplete plugin https://www.npmjs.org/package/zepto.autocomplete