jquery autocomplete avec aurelia.js comment?

Question

Je suis nouveau avec aurelia et je suis un peu perdu pour utiliser des plugins jquery ou comme jquery ui.

J'ai installé avec jquery ui: npm install jquery jquery-ui --save

J'importe:

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

erreur:

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

Answer 1

Comme le fait remarquer @Marc Scheib, toi omettent beaucoup d'informations de votre question qui aiderait avec une réponse. Ne sachant pas cette information, voici une façon de le faire fonctionner.

En utilisant la cli de aurelia:

au new uiautocomplete

• choisissez l'option 2 (dactylographiée par défaut)
• choisir Option 1 (oui, créer projet)
• choisir l'option 1 (oui, installer les dépendances)

au install jquery jquery-ui Ceci mettra à jour votre package.json fichier pour inclure ces packages, installez les packages localement et mettez à jour votre fichier aurelia_project/aurelia.json avec des références pour ces projets.

Même si le client essaie d'ajouter le fichier correct à votre fichier aurelia.json, pour que le widget de saisie semi-automatique fonctionne, vous devez mettre à jour l'une des valeurs qu'il contient. Dans les dépendances section, il devrait y avoir une entrée qui ressemble à ceci:

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

Cela doit être mis à jour:

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

Pour votre exemple, je crée une «ressource d'attribut. J'ai créé un fichier autocomplete.ts et le mettre dans le répertoire 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}); 
    } 
} 

Je mis à jour app.html contenir:

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

Hope this helps!

Answer 2

Avec jquery-ui dans Aurelia ma solution de travail a été d'utiliser une version du composant de jquery-ui:

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

puis, par exemple:

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