jquery autocomplete with aurelia.js怎麼樣？

我是新的aurelia，我有點丟失使用一些jquery插件或像jquery ui。jquery autocomplete with aurelia.js怎麼樣？

我安裝了jQuery用戶界面：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

來源

2017-09-18 Raduken

嘗試添加'aurelia.use .plugin（」 ./腳本/ Jquery的/ jquery的-1.12。0-ui'）;'（替換你的版本）在'configure'方法內 – adiga

請添加一些你的項目的信息：Webpack/JSPM？打字稿/ ES？如果沒有任何調查，請嘗試僅導入'jquery''而不是導入。 –

由於@Marc沙伊布指出，您正在遺漏很多來自你的問題，這將有助於答案。不知道這些信息，這裏有一種方法可以讓它工作。

使用奧裏利亞的CLI：

au new uiautocomplete

選擇選項2（默認打字稿）
選擇選項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>

希望這有助於！

來源

2017-09-19 22:36:25 peinearydevelopment

隨着奧裏利亞jQuery的UI我工作的解決方案是使用jQuery的用戶界面的組件版本：

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

，然後，例如：

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

來源

2017-09-21 20:08:43 GiulioG

jquery autocomplete with aurelia.js怎麼樣？

回答

相關問題