jquery-ui - 无法让 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 和 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 , 具有多个值。