Autocomplete Input Field

Wappler General How To
#21

Thanks Teodor.

There is another issue which could be rather a problem - the matching doesn’t ignore accents so typing ‘le’ won’t find ‘Léon’ or ‘Léonie’ etc… Could there be an option to make the search ‘accent insensitive’?

3 Likes
#22

Actually I don’t think an option would be needed - I think it would be best if ignoring accented characters were the default.

If anyone needs a temporary solution*, replacing this line in dmxAutocomplete.js:
return this.props.matchcase || (t = t.toLowerCase(), e = e.toLowerCase()), this.props.matchstart && (t = t.substring(0, e.length)), -1 != t.indexOf(e)
with:
return this.props.matchcase || (t = t.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, ""), e = e.toLowerCase()), this.props.matchstart && (t = t.substring(0, e.length)), -1 != t.indexOf(e)
… seems to resolve the issue.

Also, removing || 32 == t.keyCode will resolve the space issue.

*Based more on my familiarity with Google rather than Javascript.
(Also, ECMAScript 6 only - won’t work on some old browsers)

#23

I haven’t been able yo check the code yet for the new version. What plugin are you guys using for autocomplete?

#24

@TomD
all the issues which you reported already, including this one have been fixed already. We are going to include the fixes in next week’s update.

It’s our own plugin.

3 Likes
#26

Great new feature! Would be great to see the other properties that an input field has such as class, placeholder, etc. Easy to add in the code, but always nice in the gui.

1 Like
#27

I don’t see any difference in the available properties. If I click ‘Make Auto Complete’, a new set of options appears, but the standard ones remain. I’m using Windows 10.

The only feature I’ve noticed which seems to be missing or not working is ‘dmx-show’. If an input with this attribute applied is turned into an autocomplete input, show/hide attributes don’t seem to work.

#28

Ya, looks like if you convert a text input to auto complete you see more options. If you start with the auto complete element from the start, it doesn’t show as much.

#29

That’s because the properties you mention are available for Bootstrap 4 inputs only.
When you insert the component it adds an input without the Bootstrap 4 classes.

#30

That explains why we saw different options. So all options are available, except:

The only feature I’ve noticed which seems to be missing or not working is ‘dmx-show’. If an input with this attribute applied is turned into an autocomplete input, show/hide attributes don’t seem to work.

Is there a reason for this? Is it a bug?

#31

What exactly is not working, or is something missing?
Please guys post a NEW TOPIC for every issue you find, explaining the problem as detailed as possible. This way we can keep track of the issues easier, not trying to find what was reported where…

#32

I’ve added a bug report for this issue.

#33

@Teodor, at the moment, when using the auto-complete, a user must type a value whose length is at least 1 before seeing search results. Is it possible to allow the autocomplete to show results when clicking into the box without any input?

#34

I don’t think that is possible because there would be no matching results to show.

#35

You describe the function of a regular select element.

#37

Not exactly. I’d like to show a list of initial results and allow a user to type to refine the results.

#38

This has been discussed elsewhere in this forum and I agree that it would be nice to have a show-all option.

I know in one of my Autocomplete Input Fields that all the results have 2 or more words, and so simply typing a 'space' gives all the results.

Maybe if you ‘forced’ a space on the end of every result you could type a 'space' to give all the results.

So if you had

'London'
'Paris'
'Moscow'

and then programmatically added a space at the end of each result, purely for the Autocomplete, like this

'London '
'Paris '
'Moscow '

Then typing a 'space' would give all results.