Awesomplete Type Ahead

asked on January 8, 2021 • Show version history

I'm trying to set fields that have the awesomplete attribute to have 3 letter type ahead. I can successfully get it to work using $(".typethree input").attr("data-minchars","3"); and assigning the typethree class to the field.

The issue I'm having is trying to get the type ahead function to work on fields that are created in collections or tables. The code below adds the attribute to the fields, but type ahead doesn't seem to work. I think the awesomplete script needs to reevaluate the form for "new" fields with the attribute, but I'm at a loss.

$('.cf-collection-append').on('click', function(){
  $('.cf-collection-block ul').each(function () {
      $(this).find('.typethree input').attr("data-minchars","3");
  });
});

0 0

replied on January 10, 2021 • Show version history

Hi Dylan,

Somehow I haven't made simple field work with attribute "data-minchars", so I don't know what is the issue on your side. Maybe the HTML attribute is overwritten by JS property of awesomplete. Forms is setting minChars to 0 by default

https://projects.verou.me/awesomplete/

In case of conflict (e.g. you’ve specified both a data-minchars on the text field and a minChars JS property, the HTML attribute wins. You can also use the JS properties to change a parameter after the object has been created, in which case the change will apply even if there is a conflicting HTML attribute.

There is a post to achieve same function without modifying HTML attribute https://answers.laserfiche.com/questions/153721/Using-Tab-to-click-Enter-in-a-Forms-list, could you try that?

0 0

View 2 previous replies

replied on January 11, 2021

Hey Ziyan,

I started with the script from the other post, but there are a few issues using that.

1. the awesomplete list pops up when you initially click on the field and then disappears. It works but not visually acceptable from an end user's perspective.

2. It doesn't work with collections/tables without creating additional functions. The way that I wrote it using classes would end up popping up all the awesomeplete lists in the table since all had the same class

3. We are populating a lot of data to the one field, so using the attribute "data-minchars" seems to stop the lookup from happening in the first place until the specified number of characters have been typed. Using the other script, it would still populate the list and it takes a long time.

I should note that if I set the table to have at least 1 row when the form loads and the class is on the specific field, the data-minchars attribute works in the table or collection. The attribute just doesn't seem to be acknowledged when the field is dynamically added with the "add row" button.

0 0

replied on January 11, 2021

Not sure why my test environment behaves differently with yours. What version of Forms are you using?

0 0

replied on January 12, 2021 • Show version history

Tested and confirmed it works on versions: 10.4.4.444 and 10.4.5.282

*Still having issues with tables and collections though.

1 0

SELECTED ANSWER

replied on January 13, 2021

I wasn't aware of lookup rule is used to populate auto suggestion list. Now I can recreate the original issue. And yes there is conflicting with HTML attribute and JavaScript of lookup rule.

I managed to make it work with following script, but I am not sure whether it has performance issue as you mentioned before, could you try it?

  $('.cf-collection-append').on('click', function(){
    $('.cf-collection-block .rpx').each(function () {
      var element = $(this).find('.typethree input')[0];
      var awesomplete = Awesomplete.all.find(instance => instance.input === element);
      awesomplete.minChars = 3;
    });
  });

1 0

replied on January 14, 2021 • Show version history

Thank you so much for your help! That worked for most of the browsers except IE. IE doesn't seem to care for arrow functions. I did a little more digging and came up with the script below that seems to work on all browsers.

$('.cf-collection-append').on('click', function(){
    $('.cf-collection-block .rpx').each(function () {
      var element = $(this).find('.typethree input')[0];
      var awesomplete = Awesomplete.all.filter(function (instance){return instance.input === element})[0];
      awesomplete.minChars = 3;
    });
});

1 0

Question

Question

Answer

Replies

Sign in to reply to this post.