无法让 jQuery-ui 自动完成功能在 Meteor 中工作

Question

我看到其他人在 Meteor 中成功使用了 jQuery-ui，但我第一次尝试使用自动完成功能失败了。这是我尝试过的：

我将下载的 jquery-ui 文件放在我的客户端目录中（我没有保留 jQuery 文件，因为 jquery 已经可用）。这失败了，因为 jQuery 使用相对路径查找 css 文件，而 Meteor 不以这种方式提供它们 - 它使路径变平，当请求原始路径时，它返回应用程序的主页； Chrome 开发工具返回一个错误，表明它期待 css 但得到了 text/html。您可以让自动完成功能下拉，但只要您使用箭头键或鼠标悬停某个选项，它就会关闭。

然后我尝试使用jQuery-ui smart package from barisbalic on github。一旦您将 css 添加到项目中，这会导致自动完成功能几乎正常。但是，下拉列表<ul> 出现在窗口的左上角，而不是在<input> 元素下的正确位置。

这样做的正确方法是什么？我查看了 Meteorite and Atmosphere 并没有找到包裹。我需要学习构建自己的智能包吗？

Answer 1

使用表单的呈现事件来启动自动完成。

您需要将数据源或集合扁平化为一个数组（如下面的 addr_book），这可以通过集合上的 Meteor.autorun() 来完成：

function split( val ) {
  return val.split( /,\s*/ );
}

function extractLast( term ) {
  return split( term ).pop();
}


Template.compose_to_cc_bcc_subject.rendered = function () {
  start_compose_autocomplete();
}

function start_compose_autocomplete() {
  $("#field1 #field2").autocomplete({
      minLength: 0,
      source: function( request, response ) {
        response( $.ui.autocomplete.filter(
         addr_book, extractLast( request.term ) ) );
      },
      focus:function() {
        return false;
      },
      select: function( event, ui ) {
        var terms = split( this.value );
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push( ui.item.value );
        // add placeholder to get the comma-and-space at the end
        terms.push( "" );
        this.value = terms.join( ", " );
        return false;
    }
  });
}

这使用jQuery autocomplete widget，具有多个值。