Question

我是aurelia的新手，我很遗憾地使用了一些jquery插件或jquery ui。

我用npm install jquery jquery-ui --save

安装了jquery ui

我正在导入：

import $ from 'jquery';
import $ from 'jquery-ui';


   attached(){
    var aTags = ["ask","always", "all", "alright", "one", "foo", "blackberry", "tweet","force9", "westerners", "sport"];

        $( "#tags" ).autocomplete({
            source: aTags
        });
    }

HTML：

<input type='text' title='Tags' id='tags' />

错误：

Uncaught TypeError: $(...).autocomplete is not a function
    at <anonymous>:3:18
(anonymous) @ VM10535:3

Answer 1

正如@Marc Scheib所说，你遗漏了许多有助于回答的问题。不知道这些信息，这是你可以使用它的一种方式。

使用aurelia的cli：

au new uiautocomplete

选择选项2（默认的Typescript）
选择选项1（是，创建项目）
选择选项1（是，安装依赖项）

au install jquery jquery-ui这将更新您的package.json文件以包含这些软件包，在本地安装软件包并更新您的aurelia_project/aurelia.json文件以及这些项目的参考文件。

即使cli尝试将正确的文件添加到aurelia.json文件中，要使自动完成窗口小部件正常工作，您还需要更新其中的一个值。在依赖项部分中应该有一个如下所示的条目：

      {
        "name": "jquery-ui",
        "main": "ui/widget.js",
        "path": "../node_modules/jquery-ui",
        "resources": []
      }

这需要更新为：

      {
        "name": "jquery-ui",
        "main": "ui/widgets/autocomplete.js",
        "path": "../node_modules/jquery-ui",
        "resources": []
      }

对于您的示例，我创建了一个“属性资源”。我创建了一个文件autocomplete.ts并将其放在src目录中。

autocomplete.ts

import { customAttribute, inject } from 'aurelia-framework'
import * as $ from 'jquery';
import 'jquery-ui';

@customAttribute("autocomplete")
@inject(Element)
export class Autocomplete {
  constructor(private element: Element) {
  }

  public attached() {
    var aTags = ["ask","always", "all", "alright", "one", "foo", "blackberry", "tweet","force9", "westerners", "sport"];
      $(this.element).autocomplete({source: aTags});
  }
}

然后我更新app.html以包含：

<template>
  <require from="autocomplete"></require>
  <input autocomplete type="text">
</template>

希望这有帮助！

Answer 2

使用Aurelia中的jquery-ui，我的工作解决方案是使用jquery-ui的组件版本：

npm install components-jqueryui
jspm install npm:components-jqueryui

然后，例如：

import { datepicker } from 'components-jqueryui';
attached(){
    $( "#datepicker" ).datepicker();
}

用aurelia.js jquery自动完成怎么样？

2 个答案: