如何在Zepto.js中使用typeahead.js

时间:2013-10-16 23:22:27

标签: javascript zurb-foundation zepto typeahead.js

Twitter的typeahead.js依赖于jQuery 1.9(documentation),但Zurb Foundation 4将尝试在现代浏览器中加载Zepto.js。如果没有加载jQuery 1.9,typeahead.js将抛出一个错误($.deferred is not defined),显示需要做哪些更改才能使这两个库协同工作?

2 个答案:

答案 0 :(得分:2)

为此,我使用默认的Zepto 1.0和typeahead.js 0.9.3(这是我写这篇文章时的当前发布版本)

抛出的第一个错误实际上并不是你将遇到的最后一个问题,但是这是我为使它工作所做的事情(以及我添加的CSS,使它看起来像它属于基础4)。首先添加我遗漏的延迟支持simply-deferred。一旦加载了Zepto.js和简单延迟,你需要添加这一行,使简单延迟行为像jQuery:

Deferred.installInto(Zepto);

然后你需要对typahead.js进行2次更改,第一次(在line 328),获取远程数据的原始函数使用jQuery模式.$(ajax(url, {options}),看起来像这样:

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

要使这项工作Zepto(谁的$.ajax()函数只接受一个参数并将URL作为{options}对象的一部分包含),请将代码更改为:

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

这种方法适用于Zepto和jQuery。然后在typaeahead.js的底部有两个对jQuery的硬编码引用,如下所示:

    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);

这很容易更改为更兼容:

    $.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.$);

最后,因为typeahead.js在使用某些基础函数初始化这个混乱时为DOM添加了一些标记,以反击它(并设置它创建的HTML样式,使它看起来更适合于基金会)我添加了这个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%;
}

我希望这可以节省别人花时间来理清:)

答案 1 :(得分:0)

轻量级zepto自动完成插件 https://www.npmjs.org/package/zepto.autocomplete