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が指摘したように、君は答えに役立つ多くの情報を残しています。その情報を知らずに、あなたがそれを働かせることができる方法の1つです。アウレリアのCLIを使用して

：

au new uiautocomplete

• は、オプション2（デフォルト活字体）
• を選択（はい、依存関係をインストール）オプション1（はい、プロジェクトを作成します）
• オプション1を選択を選択してください

package.jsonファイルにこれらのパッケージを含めるには、パッケージをローカルにインストールし、aurelia_project/aurelia.jsonファイルをこれらのプロジェクトの参照にも更新します。

aurelia.jsonファイルに正しいファイルを追加しようとしても、オートコンプリートウィジェットが機能するには、そこに置かれている値の1つを更新する必要があります。これはに更新する必要がある

 { 
     "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> 

は、この情報がお役に立てば幸い！例えば、その後、

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

と：：

オーレリアでjqueryの-UIで

Answer 2

私の作業溶液はjqueryの-UIのコンポーネントのバージョンを使用することであった

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