Question

我正在尝试使用jQuery ui autocomplete或Twitter Typeahead添加输入。我不能做任何工作。我得到“$（...）。typeahead不是函数”或“$（...）。autocomplete不是函数”错误。

我还尝试了来自https://github.com/drivesoftware/aurelia-widgets的aurelia-widget，但我也得到了“$（...）。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>

Answer 1

首先，你必须确定'jquery-ui'的出口。它出口的东西？我相信它不会导出任何内容，相反，它只是向jquery对象添加一些函数。所以，你可以试试这个：

cd folder1
put my_file file2

Answer 2

我有同样的错误，但是当我使用 npm 检索jquery-ui时，它有效。因此，而不是＆＃34; jspm安装jquery-ui＆＃34; （这给了我错误）试试：

    jspm install npm:jquery-ui

的package.json

    "jquery-ui": "npm:jquery-ui@^1.10.5",

Answer 3

我遇到了与jQuery UI datepicker相同的问题。因此我在进行NPM安装时使用 jquery-ui-dist 而不是 jquery-ui 。

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()

Answer 4

这涉及到几个步骤。请让我注意关键点

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

npm install -save jquery jquery-ui

（然后 ，如果 您正在使用打字稿编写所请求的类型...）

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

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

jquery-ui包所在的位置，在node_modules目录下，去创建一个../ node_modules / jquery-ui / dist 目录。

然后从https://jqueryui.com/下载内置的zip最小化版本并解压缩到 dist 目录中。这些是我们将在运行时实际使用的文件。

将您的AMD加载程序配置为指向为jquery和jquery创建路径和垫片的dist min文件-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' ]
  },

（注意“export”行：'$ .autocomplete'不是必需的。由于自动完成，datepicker等小部件，将加载到$ 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">

其中countries（字符串数组）和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');
  }
}

这个版本的功能允许我们在处理标签是要搜索的文本并且值是一个外键的场景时获取源数组的标签和值。

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

自定义属性应按如下方式使用：

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

其中colors（{“label”：string，“value”：number}的数组），colorId（数字）和颜色（字符串）是视图模型上的属性。

还要注意这个新类型定义已添加到库中（只是简单的打字稿）

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

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

4 个答案: