Comments (21)
Could you please create a gist for this?
You can use this template https://gist.dumber.app/?gist=ca0cfc47e375e4b37363eeb407eb2859
from aurelia-mdc-web.
options definition
options: ((filter: string, value: unknown) => Promise<unknown[]>) | unknown[] | undefined;
If it's a function it must return a Promise
. There is also preload-options
which forces the menu to be populated from the start
from aurelia-mdc-web.
https://gist.dumber.app/?gist=01ac584061194a3093bb58cec8bbe8a6
I cannot get the SCSS for the menu and list to work.
from aurelia-mdc-web.
dumber.app does not support @use
in scss
try this
<template>
<require from="@material/button/dist/mdc.button.css"></require>
<require from="@material/list/dist/mdc.list.css"></require>
<require from="@material/menu/dist/mdc.menu.css"></require>
<require from="@material/menu-surface/dist/mdc.menu-surface.css"></require>
<require from="@material/textfield/dist/mdc.textfield.css"></require>
<require from="@material/typography/dist/mdc.typography.css"></require>
<require from="./app.scss"></require>
<!-- Try to create a css/scss/sass/less file then require it here -->
<h1 mdc-headline3>${message}</h1>
<mdc-text-field label="Contact" ref="input"></mdc-text-field>
<mdc-text-field-helper-line></mdc-text-field-helper-line>
<mdc-lookup options.bind="search" preload-options
value.bind="lookedUp & validateOnChange" input.bind="input">
<template replace-part="option">
${option}
</template>
</mdc-lookup>
<div>
You selected "${lookedUp}"
</div>
</template>
Also, your options function is incorrect - firstly, it does not filter and secondly, it ignores the second parameter which is a value.
Without filtering by value the logic will be broken.
from aurelia-mdc-web.
You can have a look at the default options function provided by the component itself for the correct implementation
from aurelia-mdc-web.
I updated the gist. I have now also included the second 'value' parameter in the function, but it is always undefined.
from aurelia-mdc-web.
The value
is not undefined when you pick an option, please observe the console carefully.
Here is the correct implementation
async getOptionsDefault(filter: string, value: unknown): Promise<unknown[]> {
const options = this.options as unknown[];
if (value) {
return Promise.resolve([options.find(x => this.getValue(x) === value)]);
} else {
return Promise.resolve(options.filter(x => this.getDisplay(x).toUpperCase().includes((filter || '').toUpperCase())));
}
}
from aurelia-mdc-web.
Updated the gist again. I think it should be OK now. But I still cannot use it an an autocomplete. I set some remarks in the code why I cannot use it now for an autocomplete.
from aurelia-mdc-web.
If you throw an error from the options function it will be displayed in a menu. The error is templateable as well.
from aurelia-mdc-web.
Update gist again with a Promise reject. Looks OK, but I get an error that at initial load the reject is not catched.
After that it seems to work.
from aurelia-mdc-web.
simple throw new Error()
should work.
I actually don't see any uncaught reject errors in the console...
from aurelia-mdc-web.
btw, if no element are found it's better to return an empty list. This handled differently and a templated "not found" item is shown
from aurelia-mdc-web.
also, you need to either wrap text field and lookup with something with an mdc-menu-surface-anchor
attribute or use hoist-to-body
attribute on the lookup
from aurelia-mdc-web.
https://gist.dumber.app/?gist=0ed27e948cc35a249ad98469e6a68959
from aurelia-mdc-web.
I really wanted an autocomplete. So that only something happens if you type in something which is then autocompleted. So the 'Not Found' when just clicking the input is not what I want.
When the user just clicks the text field and gets an Not Found message he may not understand that he has to type something first.
from aurelia-mdc-web.
I actually don't see any uncaught reject errors in the console...
If you change the reject when nothing is typed to a resolve with an empty list, then the reject error is not shown in the console.
from aurelia-mdc-web.
I added the hoist-to-body
from aurelia-mdc-web.
Please look at https://jqueryui.com/autocomplete/
from aurelia-mdc-web.
I was looking at the app logs. There is indeed an error in the browser console which is fixable by a proper try/catch in the component.
As I mentioned, Not Found is templateable too. You could also return a special option with any text you wish.
As far as I can see, the only difference with the aforementioned autocomplete is that this lookup pops up immediately on mouse click.
from aurelia-mdc-web.
Should be fixed via d4e8ebc
If for any reason a function returns undefined
the menu will not open.
If you don't preload it will behave like jq plugin.
from aurelia-mdc-web.
If the function returns a Promise returning undefined
then it works really nice.
I can now use it as an autocomplete.
from aurelia-mdc-web.
Related Issues (20)
- Lookup resets value when hidden/shown with 'if.bind'
- Error in MDCDataTable in @aurelia-mdc-web/[email protected] HOT 7
- Deprecation Warning (Non-Urgent)
- [question] How to use Snackbars? HOT 3
- A question on theme support HOT 4
- Font size of list items of drawer not correct HOT 1
- mdc-switch style missing HOT 2
- mdc-switch: Label not clickable anymore
- [bug] - list item trailing links are not clickable HOT 2
- Development guide HOT 4
- Data table navigation and sorting issues HOT 1
- Slider crashes when max and min are changing
- [Bug v2] Expandable styling incorrect HOT 1
- How to listen for mdc-switch "change" event? HOT 2
- List item checkboxes not checkable HOT 1
- mdc-segmented-button single doesn't work on Apple browsers HOT 2
- mdc-list-item non-interactive doesn't seem to work HOT 1
- hosting for au2 docs is dead HOT 2
- documentation down HOT 3
- Error: Cannot read properties of null (reading '$au') -> in dialog via service... v2 branch HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from aurelia-mdc-web.