spoonx / aurelia-autocomplete Goto Github PK
View Code? Open in Web Editor NEWAn autocomplete component for the aurelia framework.
License: MIT License
An autocomplete component for the aurelia framework.
License: MIT License
The current autocomplete.html template is for Bootstrap 3 and doesn't work with Bootstrap 4. Can I override the location of the template, so I can use a different one? I feel that it needs to be done via aurelia-view-manager configuration, but I can not figure out where and how it should be done. I'm using Aurelia-CLI if it's matter.
Recommend providing a simplest use-case in beginning documentation. Detailed use-case you've provided is excellent. See twitter typeahead examples.
When an autocomplete is supplied with items and with an initial selection, the items matching the initial selection are uncollapsed after the component is created because hasFocues
is set to true
in valueChanged()
.
<auto-complete result.bind="mySelection" items.bind="myOptions"></auto-complete>
Hi,
I installed the package using npm, and there are some problems:
COULD NOT CONVERT: C:/Users/eertu/Source/Workspaces/Encumen/Encumen/src/Encumen.Web.Client/node_modules/aurelia-autocomplete/src/aurelia-autocomplete.js, so skipping it. Error was: Error: Line 8: Unexpected token
{ uid: 8,
name: 'writeBundles',
branch: false,
error:
Error: Parse error using esprima for file: C:/Users/eertu/Source/Workspaces/Encumen/Encumen/src/Encumen.Web.Client/node_modules/aurelia-autocomplete/src/aurelia-autocomplete.js
Error: Line 8: Unexpected token
at Object.context.load (C:\Users\eertu\Source\Workspaces\Encumen\Encumen\src\Encumen.Web.Client\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:379:19)
at Object.load (eval at (C:\Users\eertu\Source\Workspaces\Encumen\Encumen\src\Encumen.Web.Client\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:9), :832:29)
at Object.fetch (eval at (C:\Users\eertu\Source\Workspaces\Encumen\Encumen\src\Encumen.Web.Client\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:9), :822:66)
at Object.check (eval at (C:\Users\eertu\Source\Workspaces\Encumen\Encumen\src\Encumen.Web.Client\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:9), :854:30)
at Object.enable (eval at (C:\Users\eertu\Source\Workspaces\Encumen\Encumen\src\Encumen.Web.Client\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:9), :1173:22)
at Object.enable (eval at (C:\Users\eertu\Source\Workspaces\Encumen\Encumen\src\Encumen.Web.Client\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:9), :1554:39)
at Object.context.enable (C:\Users\eertu\Source\Workspaces\Encumen\Encumen\src\Encumen.Web.Client\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:289:24)
at Object.eval (eval at (C:\Users\eertu\Source\Workspaces\Encumen\Encumen\src\Encumen.Web.Client\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:9), :1158:33)
at eval (eval at (C:\Users\eertu\Source\Workspaces\Encumen\Encumen\src\Encumen.Web.Client\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:9), :134:23)
at each (eval at (C:\Users\eertu\Source\Workspaces\Encumen\Encumen\src\Encumen.Web.Client\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:9), :59:31),
duration: [ 12, 890126996 ],
time: 1484042984775 }
{ uid: 0,
name: '',
branch: true,
error:
Error: Parse error using esprima for file: C:/Users/eertu/Source/Workspaces/Encumen/Encumen/src/Encumen.Web.Client/node_modules/aurelia-autocomplete/src/aurelia-autocomplete.js
Error: Line 8: Unexpected token
at Object.context.load (C:\Users\eertu\Source\Workspaces\Encumen\Encumen\src\Encumen.Web.Client\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:379:19)
at Object.load (eval at (C:\Users\eertu\Source\Workspaces\Encumen\Encumen\src\Encumen.Web.Client\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:9), :832:29)
at Object.fetch (eval at (C:\Users\eertu\Source\Workspaces\Encumen\Encumen\src\Encumen.Web.Client\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:9), :822:66)
at Object.check (eval at (C:\Users\eertu\Source\Workspaces\Encumen\Encumen\src\Encumen.Web.Client\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:9), :854:30)
at Object.enable (eval at (C:\Users\eertu\Source\Workspaces\Encumen\Encumen\src\Encumen.Web.Client\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:9), :1173:22)
at Object.enable (eval at (C:\Users\eertu\Source\Workspaces\Encumen\Encumen\src\Encumen.Web.Client\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:9), :1554:39)
at Object.context.enable (C:\Users\eertu\Source\Workspaces\Encumen\Encumen\src\Encumen.Web.Client\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:289:24)
at Object.eval (eval at (C:\Users\eertu\Source\Workspaces\Encumen\Encumen\src\Encumen.Web.Client\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:9), :1158:33)
at eval (eval at (C:\Users\eertu\Source\Workspaces\Encumen\Encumen\src\Encumen.Web.Client\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:9), :134:23)
at each (eval at (C:\Users\eertu\Source\Workspaces\Encumen\Encumen\src\Encumen.Web.Client\node_modules\aurelia-cli\lib\build\amodro-trace\lib\loader\Loader.js:14:9), :59:31),
duration: [ 15, 93924911 ],
time: 1484042984789 }
If installing using the Aurelia cli, I'm getting 4 "File not found or not accessible" errors when trying to run.
Hi, I'm trying to override the searchQuery method which i see according to the documentation is possible, but I can't figure out how. For now I just modified the autocomplete.js in the jspm folder AutoCompleteCustomElement.prototype.searchQuery
function though I know it is a bad practice
Hi there,
Wondering if it is possible to use the Enter key to select an element from the drop down? I can't seem to find anything in the docs.
Cheers,
https://github.com/SpoonX/aurelia-autocomplete/blob/master/src/component/autocomplete.js#L454
let query = {
populate: this.populate || 'null',
where : mergedWhere
};
If populate
is 'null'
, the request will include populate=null
.
Defaulting it to an empty array will leave out the populate
property in the request.
On Safari macOS, clicking an option closes the autocomplete, but doesn't select the value. The <input>
's onBlur
prevents the onSelect
from being triggered.
Hi,
I couldn't find Aurelia-autocomplete on NPM. Could you please put it there as well?
Following scenario:
When I change the value bound to the autocomplete's result
attribute from my view controller, the change is not reflected in the view, i.e. the old selection is displayed.
Hi there,
I'm binding a property onto selected and decorating it as observable, but my change event never gets called. I'm thinking that selected isn't being set correctly?
Cheers,
Not sure if this a issue or a question. I have already asked this question on SO, which is as below. I am posting this here as I have not yet received any answer for the question. If you think this is not a real issue, then please close this one. It would really great if you please provide an answer/work-around either here or in SO.
I am trying to use aurelia-autocomplete
in my project (based on Webpack), without other aurelia packages from SpoonX.
Though it works correctly on run time, during build it throws the below error.
[at-loader] ./node_modules/aurelia-autocomplete/dist/aurelia-autocomplete.d.ts:13:1
TS1128: Declaration or statement expected.
[at-loader] ./node_modules/aurelia-autocomplete/dist/aurelia-autocomplete.d.ts:13:16
TS1005: ';' expected.
[at-loader] ./node_modules/aurelia-autocomplete/dist/aurelia-autocomplete.d.ts:15:8
TS1005: ';' expected.
[at-loader] ./node_modules/aurelia-autocomplete/dist/aurelia-autocomplete.d.ts:17:1
TS1128: Declaration or statement expected.
[at-loader] ./node_modules/aurelia-autocomplete/dist/aurelia-autocomplete.d.ts:17:16
TS1005: ';' expected.
[at-loader] ./node_modules/aurelia-autocomplete/dist/aurelia-autocomplete.d.ts:13:8
TS2304: Cannot find name 'declare'.
[at-loader] ./node_modules/aurelia-autocomplete/dist/aurelia-autocomplete.d.ts:15:3
TS2304: Cannot find name 'from'.
[at-loader] ./node_modules/aurelia-autocomplete/dist/aurelia-autocomplete.d.ts:17:8
TS2304: Cannot find name 'declare'.
[at-loader] ./node_modules/aurelia-autocomplete/dist/aurelia-autocomplete.d.ts:18:3
TS2304: Cannot find name 'logger'.
My Visual Studio Code also shows the error in aurelia-autocomplete.d.ts
.
Of course the errors disappear when I comment the problematic exports. Also the notation/syntax for those exports are slightly confusing for me, especially when the class AutoCompleteCustomElement
is exported below (refer the last line of the screenshot).
Is there any way around this error?
I am using version 2.2.3 of aurelia-autocomplete and cannot specify minInput - it constantly evaluates to 0 in hasEnoughCharacters
. I have tried:
<auto-complete ... minInput.bind="minInput"></auto-complete>
with a corresponding field minInput
set to 1 in my controller class and
<auto-complete ... minInput="1"></auto-complete>
No idea if this is a bug or if I am doing anything wrong.
Hi, first of all thanks for this awesome component, I'm having an issue with the autocomplete, I have a fixed set of items in an array, but every time the page loads, it always show de dropdown with no items like this:
this is my code:
html
...
<auto-complete items.bind="skills" value.two-way="skill" placeholder="Enter Skill" limit="10" ></auto-complete>
...
js
export class testComponent {
constructor(config, router) {
this.skills = ['Painting', 'Programing'];
}
}
Any ideas to fix this?
Thanks!
Are there plans to support multiple selected values as Select2 does? Or is that supported already and I missed it?
Thank you
Thomas
Uncaught (in promise) ReferenceError: promise is not defined
Looks like promise
actually doesn't exist here:
https://github.com/SpoonX/aurelia-autocomplete/blob/master/src/component/autocomplete.js#L246
autocomplete.js:70 Uncaught TypeError: this.dropdownToggle.dropdown is not a function
at AutoCompleteCustomElement.showDropdown (autocomplete.js:70)
at AutoCompleteCustomElement.handleKeyDown (autocomplete.js:222)
at CallScope.evaluate (aurelia-binding.js:1517)
at Listener.callSource (aurelia-binding.js:5232)
at Listener.handleEvent (aurelia-binding.js:5241)
This occurs when there are results in the dropdown and I am changing using backspace or space
Hi all,
I started working with aurelia-autocomplete. but i got stuck in initial setting up steps.
versions available at my desk are:
Steps followed by me to add aurelia-autocomplete plugin
on console in browser getting error - Unhandled rejection Error: Unable to find module with ID: aurelia-autocomplete/component/autocomplete
No error on node terminal
Please help to get started with aurelia-autocomplete
Thanks in advance
I am currently applying some modifications to the component so that it works with bootstrap 4 and I would like to contribute this. How do you want to go about supporting both bs3 and bs4?
Hi, I'm relatively new to Aurelia, and I'm working on a project where I'm going to use aurelia-autocomplete. I've got it (mostly) working, but I could use some help with a couple of things:
Can you provide an example of how to configure the plugin to use the bootstrap4 html file? I've got the plugin configured in my main.js, but I don't know how to add the option there.
Also, I have been trying to figure out how to watch for changes to the value (which is bound to a child of an object). I tried to use footerSelected, but I haven't had any success with it. If you have an example of that, it would be helpful if I could see how to use it.
Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.