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

Question

I am new with aurelia and I am kinda lost to use some jquery plugins or like jquery ui.

I installed jquery ui with : npm install jquery jquery-ui --save

I am importing:

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' />

error:

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

Answer 1

As @Marc Scheib notes, you are leaving out a lot of information from you question that would help with an answer. Not knowing that information, here is one way you could get it to work.

Using aurelia's cli:

au new uiautocomplete

• choose Option 2(default Typescript)
• choose Option 1(yes, create project)
• choose Option 1(yes, install dependencies)

au install jquery jquery-ui This will update your package.json file to include these packages, install the packages locally and update your aurelia_project/aurelia.json file with references for these projects as well.

Even though the cli tries to add the correct file to your aurelia.json file, for the autocomplete widget to work, you will need to update one of the values it puts there. In the dependencies section there should be an entry that looks like this:

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

This needs to be updated to:

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

For your example, I created an 'attribute resource'. I created a file autocomplete.ts and put it in the src dir.

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});
  }
}

Then I updated app.html to contain:

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

Hope this helps!

Answer 2

With jquery-ui in Aurelia my working solution has been to use a component version of jquery-ui:

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

and then, for example:

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