使用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

回答

相關問題