Autocomplete/ type ahead field

Help Center Get Answers
1

Curious if anyone has been able to successfully implement automcomplete / type ahead JavaScript for a text field.

I have a field that I would like to implement it for and I am struggling with the JavaScript. The goal is to get the user to start typing the name of something then have to auto populate based on an array or list I have defined in code. I wish this was a out of the box feature. Thanks in advance.

2

Hi,

I can write the JavaScript, but why not just implement the field as a Connection, which supports autocomplete by default? For example, you can create a table in your database, then add a record for each option. Let me know if you have any questions about this.

Best

2 Likes
3

Thanks @KnackPros for the response. A connection was my initial thought too BUT a new requirement is that the list of selection options should not be completely visible to the user. The list options would hold names that the requestor prefers to not be made “easily” visible – as they type the list can narrow down the selection options but the field should not allow the user to see all list items. So a type ahead with a local datalist/array seems to best suit that scenario. Your thoughts?

4

Hi @Nakeeah!

Thank you for sharing your challenge and providing the details!

I’m not sure if this information will be helpful, but I’ll share this in case: When using Form views, List views, and Grid views, you are able to filter which connected records are available to choose from:

image
image2846Ă—1346 234 KB

If this won’t help you achieve your goal or you have further questions, please reach out to our support team and we’ll be happy to assist you! You can reach out to our team directly while building in your app or by submitting this form here.

1 Like
5

@Les this does not address my problem. I will reach out to support. To help others who may read this to understand better…the requestors wants the type ahead and validation/value standardization benefits of the Connection field BUT does not want to see the full list. A portion of the list can display/auto-populate as the user types in characters. When I tried the filter, it hid the entire list regardless and never allowed for any auto-population.

1 Like
6

@Nakeeah I think you meant to address @Les

7

Yes, I did. Just updated the comment. Thx.

8

@Nakeeah Here’s one approach.

  1. Add event listeners for input and focus on the connection field.
  2. Locate the html element that holds the list.
  3. When the connection field is focused, hide the list if the input is blank, else show the list.

This will achieve your goal of hiding the full list, but still seeing a portion of the list as the user types.

1 Like
9

@KnackPros I would welcome you writing the JavaScript. I have identified a couple different approaches but would need to reconfigure canned JavaScript code for Knack specifications. Please message directly. Thanks.

10

@Nakeeah Thank you for the additional details! I’m sorry this isn’t working as expected. After you have set a filter on the connection field, it should not hide the entire list. It should also allow you to start typing an option and will populate options based on that search. Our team will be happy to help you with this feature and get that working as needed.

Again, sorry for the trouble! Once you have the support ticket number, I’ll be happy to bring attention to it with our support team to make sure it’s addressed quickly. If you’d like, you can share that number here.

Thank you!