使用aurelia.js进行jQuery自动完成的方式如何？

Question

我是aurelia的新手，我有点迷失于使用一些jquery插件或喜欢jquery ui。

我安装了jQuery UI： npm install jquery jquery-ui --save

我正在导入：

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（默认打字稿）
• 选择选项1（是，创建项目）
• 选择选项1（是，安装依赖项）

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

即使cli尝试将正确的文件添加到aurelia.json文件中， 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();
}