使用jQuery自动完成或Twitter Typeahead与Aurelia

我试图添加与jQuery ui自动完成或Twitter Typeahead的输入字段。我无法做任何工作。我得到“$（...）。typeahead不是函数”或“$（...）。autocomplete不是函数”错误。使用jQuery自动完成或Twitter Typeahead与Aurelia

我也试过aurelia-widget从https://github.com/drivesoftware/aurelia-widgets，但我也得到“$（...）.autocomplete不是函数”的错误。

如果有人能告诉我我做错了什么，我将不胜感激。

locate.js

import {customElement, bindable} from 'aurelia-framework'; 
import $ from 'jquery'; 
import { autocomplete } from 'jquery-ui'; 

@customElement('locate') 
export class Locate { 
    @bindable data; 
    constructor(element) { 
    this.element = element; 
    } 
    activate() {} 

    detached(){} 

    attached(){ 
    $(this.element).autocomplete({ 
     source:['Japan', 'USA', 'Canada', 'Mexico'] 
    }); 
    } 
}

locate.html

<template> 
    <label for="locator-input"></label> 
    <div id="locator-input-wrapper"> 
     <input id="locator-input" type="text" placeholder="Search"> 
    </div> 
</template>

来源

2016-02-12 totoro88

首先，你必须确定什么'jQuery的UI的出口。它出口什么东西？我相信它没有任何出口，相反，它只是添加一些函数jquery对象。所以，你可以试试这个：

import {customElement, bindable} from 'aurelia-framework'; 
import $ from 'jquery'; 
import 'jquery-ui'; 

@customElement('locate') 
export class Locate { 
    @bindable data; 
    constructor(element) { 
    this.element = element; 
    } 
    activate() {} 

    detached(){} 

    attached(){ 
    $(this.element).autocomplete({ 
     source:['Japan', 'USA', 'Canada', 'Mexico'] 
    }); 
    } 
}

来源

2016-02-12 11:43:01

感谢您的答复。我尝试过这样的事情，而且我得到了同样的错误。但是我可以做出Awesomplete的工作，https://leaverou.github.io/awesomplete/。 – totoro88

那么，你解决了你的问题吗？你还想使用jquery-autocomplete吗？让我看看'jquery-ui'文件的内容。也许你必须做一些改变才能将它作为模块加载 –

我有同样的错误，但是当我使用NPM检索jQuery的用户界面，它的工作。因此，而不是 “JSPM中安装jQuery UI的”（这给我的错误）尝试：

jspm install npm:jquery-ui

的package.json

"jquery-ui": "npm:[email protected]^1.10.5",

来源

2016-03-29 13:13:21 proggrock

我与jQuery UI日期选择器同样的问题。所以我用jquery-ui-dist而不是jquery-ui在做NPM安装时。

import "jquery-ui-dist/jquery-ui"; 
import "jquery-ui-dist/jquery-ui.min.css"; 
import "jquery-ui-dist/jquery-ui.theme.min.css";

然后：

$(this.element).datepicker()

来源

2016-11-09 16:31:21 DimitarKostov

有参与这个几个步骤。请让我注意关键点

首先，您必须安装以下软件包（我正在使用nodeJS）。

npm install -save jquery jquery-ui

（当时和如果你是编码在打字稿请求的类型......）

npm install -save @types/jquery @types/jqueryui

我正在安装这些软件包仅用于使用打字机进行编码，并且具有智能感知功能，但实际上我不会在运行时使用它们。

凡的jquery-ui包驻留，上node_modules目录，走，并创建一个../node_modules/jquery-ui/ DIST目录。

然后从https://jqueryui.com/下载内置ZIP最小化版本并解压缩成DIST目录。这些是我们在运行时真正使用的文件。

配置您AMD装载机以指向DIST分钟文件生成路径和垫片为jQuery和jQuery的UI。在我的情况下，AMD加载器是requireJS。

require.config(
    { 
    "paths": { 
     "jquery": '../node_modules/jquery/dist/jquery.min', 
     "jquery-ui": '../node_modules/jquery-ui/dist/jquery-ui.min'

（代码简洁，删除...）

"shim": { 
    "jquery": { 
    "exports": '$' 
    }, 
    "jquery-ui": { 
    "exports": '$.autocomplete', 
    "deps": ['jquery' ] 
    },

（注意行 “出口”： '$ .autocomplete' 没有必要的，因为。自动完成，日期选择器等小部件，将加载到$ jQuery全局变量，我只用这条线作为信号给我的AMD加载器，它确实加载了一些东西）

由于我的AMD装载机不“解析” CSS文件，我不得不手动添加的jquery-ui.min.css样式表到我的index.html

<!DOCTYPE html> 
<html> 
<head lang="en"> 

(code removed for brevity…) 
    <link href="./node_modules/jquery-ui/dist/jquery-ui.min.css" rel="stylesheet" />

对于这种情况下的最佳选择是自定义属性

创建自定义属性或定制元素（在我的意见

即创建一个名为：auto-complete.ts的类文件（我在打字稿上编码，为vainilla javascript删除类型）。

import { DOM, inject, bindable, bindingMode } from 'aurelia-framework'; 

import { fireEvent } 'library'; 

import * as $ from 'jquery'; 
import 'jquery-ui'; 

@inject(DOM.Element) 
export class AutoCompleteCustomAttribute { 

    @bindable source: any; 
    @bindable options = {}; 
    @bindable({ defaultBindingMode: bindingMode.twoWay }) value: JQueryUI.AutocompleteUIParams; 

    private readonly element: Element; 

    constructor(element: Element) { 
    this.element = element; 
    } 

    attached() { 
    $(this.element).autocomplete({ 
     change: (event, ui) => { 
     if (ui.item == null) { 
      $(this.element).val(''); 
      $(this.element).focus(); 
     } 
     }, 
     select: (label, value) => this.value = value, 
     source: this.source 
    }).on('change', e => fireEvent(<any>e.target, 'input')); 
    } 

    detached() { 
    $(this.element).autocomplete('destroy'); 
    } 
}

创建一个共享的模块，其中，以（直接在定制或代码属性本身，我打算坚持使用共享模块选项）的代码共享的功能

即创建一个名为：library的类文件。TS

export function fireEvent(element: Element, name: string) { 
    var event = createEvent(name); 
    element.dispatchEvent(event); 
} 

export function createEvent(name: string) { 
    var event = document.createEvent('Event'); 
    event.initEvent(name, true, true); 
    return event; 
}

在您的代码本的自定义属性的使用是只是将其附加到输入文本标记，如下所示：

<input auto-complete="source.bind:countries; value.two-way: country">

其中国家（字符串数组）和国家（字符串）是视图模型上的属性。

不要忘记在Aurelia项目的./src/resources/index.ts中手动添加自定义属性作为全局资源。main.js configure（）功能如下：

aurelia.globalResources(["auto-complete"]);

我希望这个答案是有益

嗨再次，我加入了一个更新的代码为这里自定义属性下面

import { DOM, inject, bindable, bindingMode } from 'aurelia-framework'; 

import * as $ from 'jquery'; 
import 'jquery-ui'; 

import { fireEvent, AutoCompleteSource } from 'libs/library'; 

@inject(DOM.Element) 
export class AutoCompleteCustomAttribute { 

    @bindable options = { 
    applyLabel: true, 
    forceMatch: true 
    }; 

    @bindable source: AutoCompleteSource[]; 
    @bindable({ defaultBindingMode: bindingMode.twoWay }) value: number; 
    @bindable({ defaultBindingMode: bindingMode.twoWay }) label: string; 

    private readonly element: JQuery<HTMLElement>; 

    constructor(element: Element) { 
    this.element = $(element); 
    } 

    attached() { 
    this.element 
     .autocomplete({ 
     source: this.source, 
     change: (event, ui) => { 
      if (ui.item == null && this.options.forceMatch) { 
      this.element.val(''); 
      } 
     }, 
     select: (event, ui) => { 
      if (this.options.applyLabel) { 
      event.preventDefault(); 
      this.element.val(ui.item.label); 
      } 
      this.label = ui.item.label; 
      this.value = ui.item.value; 
     }, 
     focus: (event, ui) => { 
      if (this.options.applyLabel) { 
      event.preventDefault(); 
      this.element.val(ui.item.label); 
      } 
      this.label = ui.item.label; 
      this.value = ui.item.value; 
     } 
     }).on('change', e => fireEvent(<any>e.target, 'input')); 
    } 

    detached() { 
    this.element 
     .autocomplete('destroy'); 
    } 
}

这个版本的funcionality让我们获得了标签，并与场景打交道时，其中的标签是搜索文本和值是foreing键源阵列的价值。

增加了强制输入的文本匹配其中一个现有值的功能。增加了funcionality以在输入文本显示上应用标签而不是值。

自定义属性应该被使用如下：

<input type="text" value="${color}" auto-complete="source.bind:colors;value.bind:colorId;label.bind:color">

其中颜色（的{ “标记”：字符串， “值”：数}阵列），colorId（号码）和颜色（字符串）是视图模型上的属性。

公告同时这种新型的定义添加到库中（只是简单的打字稿的东西）

export type AutoCompleteSource = { "label": string, "value": number };

来源

2017-10-02 10:20:52 alhpe

使用jQuery自动完成或Twitter Typeahead与Aurelia

回答

相关问题