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>元素下的正确位置。

这样做的正确方法是什么？我看过陨石和大气层并没有找到包裹。我是否需要学习构建自己的智能包？

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，其中包含多个值。

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

1 个答案: