Autocomplete Input Field

Wappler General How To
#7

You are missing the search query parameter.
Try this:
https://community.wappler.io/search.json?q=autocomplete

Replace ‘autocomplete’ with whatever your search term is.

#8

Hi, I have this json file. Is it italian contry/region/province
https://erp.decoresin.com/app/json/comuni.json
How can I apply your code at this file ?
I want search for ‘nome’
Many tank’s

#9

this is rapresentation json file

{
“nome”: “Terranova dei Passerini”,
“codice”: “098057”,
“zona”: {
“nome”: “Nord-ovest”,
“codice”: “1”
},
“regione”: {
“codice”: “03”,
“nome”: “Lombardia”
},
“cm”: {
“codice”: “”,
“nome”: “”
},
“provincia”: {
“codice”: “098”,
“nome”: “Lodi”
},
“sigla”: “LO”,
“codiceCatastale”: “L125”,
“cap”: [“26827”],
“popolazione”: 906
}

#10

Try data-repeat=“api1.data” dmx-bind:value=“id” {{nome}}.
I am not in front of my system to check, try comparing JSON results from example and your file.

#11

The solution shared with you requests data from an API which filters the response based on value of ‘q’ parameter passed.
What you have given is a JSON file. Try this: https://stackoverflow.com/questions/34089643/load-json-file-to-datalist-input

If you can set up a database or an API where all this data resides, then the solution given by @patrick in the link I shared can be used.

#12

Hi,

I am reviving this thread as I am trying to do an autocomplete input field that reads from a server connect.

I tried the solution of @patrick here: We need a auto complete is very used however, the datalist does not look good on Safari as it does not scale with the width of the input field.

Hence, I am trying to use the autocomplete script of Jquery-UI https://jqueryui.com/autocomplete/ but given my limited knowledge of javascript I would like to know how I can populate var availableTags in the below with a list of multiple entries {{serverconnect1.data.query1.data.label}} from AppConnect. Please note that the extract below is under<body>

<script>
  $( function() {
    var availableTags = [
            "ActionScript",
            "AppleScript",
            "Java"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );
  </script>

Thank you

#13

Use a function as the source and return the data from serverconnect. I don’t know your data structure, bit it will becaome something like:

<script>
  $( function() {
    $( "#tags" ).autocomplete({
      source: function(request, response) {
        var data = dmx.parse('serverconnect1.data.query1.data');
        data = data.filter(function(item) {
          return item.label.indexOf(request.term) != -1;
        });
        response(data);
      }
    });
  } );
</script>

The request argument is an object with the term property on it, you need it to filter your data. The dmx.parse method parses the App Connect expression and returns it data. The data then needs to be filtered with the term value. In the end the response callback function is called with the data.

#14

Agree with you about datalists not looking good. An auto complete component would be a nice addition. Yes, it can be coded but visual is so much better,

3 Likes
#15

Patrick is already researching to make autocomplete as component. So it’s coming up :slight_smile:

8 Likes
#16

Autocomplete component is now available in Wappler 2.2.5

4 Likes
#17

A really useful feature - and excellently implemented as usual. However, there seem to be a couple of minor issues.

The first problem is that it doesn’t seem to be possible to include spaces, eg having typed ‘james’, I can’t type a space to refine the seach further:

image

If I paste in a space, it works fine:

image

The other issue is hardly a problem. For a server connect action, I chose a field using DISTINCT. In some records this field could be empty and this resullted in a Javascript error every time I entered a keystroke. I just added a WHERE condition to the query and all was well.

1 Like
#18

Yes I cant include spaces

#19

Hi Tom,
We are going to check the space issue.
As for the empty values, indeed in your case you should use the not empty condition.

#20
#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.