Chips autocomplete should have option to prevent user own input

[nicknickel]

Proposed changes

Chips autocomplete should have option to prevent user own input

• this is an implementation of Ref. 4736 Chips autocomplete should have option to prevent user own input  Dogfalo/materialize#5725
• added boolean option autoCompleteOnly to chips defaults options
• when pressing enter to add a chip, the chip is only added if M.Chips.options.autocompleteOnly==false (or if hasAutcomplete == false)

Types of changes

• Bug fix (non-breaking change which fixes an issue).
• New feature (non-breaking change which adds functionality).
• Breaking change (fix or feature that would cause existing functionality to change).

Checklist:

• I have read the CONTRIBUTING document.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes.
• All new and existing tests passed.

[doughballs]

Can this be extended to autocomplete.js?

[nicknickel]

@doughballs - Potentially, though I'm not sure how that would operate since the autocomplete component is more or less a text field. Would the value just get removed on blur if it's not one of the autocomplete options?

[doughballs]

Ah yeah, sorry I assumed maybe they operated in the same way (I never really use chips so not familiar), and this would be a quick win.

I don’t know, is the answer. I think actually this may need more consideration (for the autocomplete) because really what would be ideal is for the feedback to be instant - we wouldn’t want the dropdown closing (and user having to click back into the text field). I was working on a pen a while back that isn’t great but half does the job.

https://codepen.io/doughballs/pen/zYGrXjJ

With the key line being:

if ( instances[0].count === 0 )

As this is a real-time check of the data.

I think we treat is as a separate enhancement.

[nicknickel]

No worries! Chips acts a bit more like an array where you can push and pop things on and off it, which seems to more easily benefit from disallowing custom values.

I have a few ideas for what this setting could look like on the autocomplete but they would involve a bit more work. As such, I would also lean towards leaving this PR as is and treating the autocomplete component as a separate enhancement.

[Pierstoval]

I have a few ideas for what this setting could look like on the autocomplete but they would involve a bit more work. As such, I would also lean towards leaving this PR as is and treating the autocomplete component as a separate enhancement.

Agreed! I'd like to first add this possibility and let userland decide whether it includes problems or not.

As-is, the feature is harmless (because ot's backwards compatible) and if any issue comes from it, we'll know it soon enough to see if we have to deal with more complex stuff related to autocompletion 😉

I'm okay to merge, personnally 👍

[Pierstoval]

Ah yeah, sorry I assumed maybe they operated in the same way (I never really use chips so not familiar), and this would be a quick win.

I don’t know, is the answer. I think actually this may need more consideration (for the autocomplete) because really what would be ideal is for the feedback to be instant - we wouldn’t want the dropdown closing (and user having to click back into the text field). I was working on a pen a while back that isn’t great but half does the job.

https://codepen.io/doughballs/pen/zYGrXjJ

With the key line being:

if ( instances[0].count === 0 )

As this is a real-time check of the data.

I think we treat is as a separate enhancement.

Only the $('#autocomplete-input').val(''); part must be removed in your code to be okay-ish 😉

[DanielRuf]

I'm okay to merge, personnally +1

Please add your review =)

[DanielRuf]

Great work everyone 🎉

[DanielRuf]

@nicknickel you should have received an invitation for the materializecss org and to the members team of it.

You can see and accept it at https://github.com/materializecss

[abcdefg123455]

Hi,
any example of how I can implement this. Trying on JSfiddle.

https://jsfiddle.net/xc1wa8fq/6/

[DanielRuf]

any example of how I can implement this. Trying on JSfiddle.

It is not released / in a release so you have to wait until we have published a new version with this change.

[abcdefg123455]

Hi Daniel,
Thanks for your reply. When do you expect this may happen? How can I know when it is?

I ask because if it the release is imminent I will delay developing my project. If it is 6 months off, or even probably more than a month off I will find another way. Thanks again

[Smankusors]

Hi,
any example of how I can implement this. Trying on JSfiddle.

https://jsfiddle.net/xc1wa8fq/6/

actually, I think you are just asking how to implement autocomplete as general, not this new feature within autocomplete. The autocomplete main feature itself already implemented.

if you open the console, you will see Uncaught ReferenceError: $ is not defined. The jquery URL you entered on the resources, is incorrect. Perhaps you double pasted it? 😉

and jquery should be also placed first before loading materialize.

[abcdefg123455]

Hi Smankusors,
Appreciate the pickup (will fix - gracias); however no – I need an option for limiting the options a user may select.

I have for eg 1000 products. Need to be able to select one. Autocomplete search bar is the best approach I think. (As opposed to product categories and multiple drop down select boxes).

I want only one product to be able to be selected but I don't them to have to scroll through 1000 products in a drop down. If they can search through it (and I can limit what may be entered/selected) that would be perfect.

[abcdefg123455]

It would also be really appreciated if something like this could be implemented natively: (additional feature request/not modification)

---

https://codepen.io/yassinevic/pen/eXjqjb. <<< Would be great

---

Also, for selects being able to have a placeholder (that is hidden from the options list that displays when clicked, instead of only being disabled.) If this placeholder could also appear as the grey colour other placeholders do, rather than a disabled one appearing black (which the user may mistake as already filled in)

[nicknickel]

@abcdefg123455 - I rigged something similar to that by setting the minLength option on the autocomplete component to 0. This caused the autocomplete dropdown to open when the user focused the input window and could then filter by typing. Not saying what you have couldn't be implemented, just that there might be something functionally similar in the meantime.

[abcdefg123455]

I've been looking into a few options. Your one rings a bell. If its the one I remembered there were a few issues that I couldn't get around - for starters 'A' was not valid for Apple (and would be deleted) but 'a' was valid.

[abcdefg123455]

Thanks for the reply though Nick, if you point me in the direction of your code I'll look at it (in case its different from the above-mentioned one I'd looked at already)

[nicknickel]

@abcdefg123455 - This is essentially what I used: https://codepen.io/nicknickel/pen/rNerRNy

[abcdefg123455]

Thanks Zach @nicknickel

How would you approach rejecting user input not in the data object?

[nicknickel]

@abcdefg123455 - This is a quick example of what I would probably do: https://codepen.io/nicknickel/pen/rNerRNy

[abcdefg123455]

@nicknickel

Thanks Zach, looks like a good approach

I've tried playing around with it but it doesn't always work, if you do multiple attempts eventually it stops removing wrong values.

I know I'll have server side validation but I'd really like it to work 100% of the time on the client to any avoid confusion for the user.

e.g. enter 'App' - click apple. Click away. Then click on it again and add 's' and Apples will stay even though not an option

[abcdefg123455]

Does anyone think this could be added to materialize? Feature Request

https://codepen.io/yassinevic/pen/eXjqjb.

[doughballs]

What is it?

[DanielRuf]

Does anyone think this could be added to materialize? Feature Request

Please open a new issue.