1

Twitter 的typeahead.js依赖于 jQuery 1.9（文档），但Zurb Foundation 4将尝试在现代浏览器中加载 Zepto.js。如果没有 jQuery 1.9 加载 typeahead.js 会抛出错误 ( $.deferred is not defined)，显示需要进行哪些更改才能使这两个库一起工作？

4

2 回答 2

2

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

抛出的第一个错误实际上不是您将遇到的最后一个问题，但这是我为使其正常工作所做的工作（以及我添加的 CSS 以使其看起来属于 Foundation 4）。首先添加缺少的延迟支持，我包括了simple-deferred。一旦 Zepto.js 和 simple-deferred 被加载，你需要添加这一行来使 simple-deferred 表现得像 jQuery：

Deferred.installInto(Zepto);

然后您需要对 typahead.js 进行 2 处更改，第一个（在第 328 行），获取远程数据的原始函数使用 jQuery 模式.$(ajax(url, {options})，如下所示：

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

为了完成这项工作，Zepto（who 的$.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 添加了一些标记，这与一些基础.css 混淆，以应对它（并设置它创建的 HTML 的样式，使其看起来更适合 Foundation）我添加了这个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%;
}

我希望这可以节省其他人我整理的时间:)

于 2013-10-16T23:22:27.420 回答
0

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

于 2014-08-14T03:27:39.513 回答