Web form text field autocomplete based on collection list or else (Zapier, spreadsheet, ...)

Hi there!

I’m new to Webflow and am amazed at how powerful it is. I however would need to customize it a little bit in order to achieve my desired web form behavior. The idea is that I want one of the fields of my web form to be autocompleting based on data that I put somewhere (either in zapier, or I can directly import it in Webflow. In any case, this is static data). This would behave the same way as a field e.g. in the backend of Drupal. You have a list, let’s say of three names: “John Doe, John Smith and Donald Spencer”. When filling in the text field with “Jo…” it would suggest the two first names and exclude the third one, etc. You get the idea.

More practically, I want to achieve something similar to this: How to Create Autocomplete Dropdowns With Datalist | Treehouse Blog
Zapier also is featuring this use case, but I’m absolutely not confident on how to implement it on a Webflow form: Zapier Platform UI Documentation

Question now is, how would you proceed to get that sorted and working in Webflow?

Many thanks for your help guys.

Benjamin

Edit: other reference, seems to be possible using jQuery and Collection lists (see third comment). I don’t have the skills though. Populate form elements with CMS collection data | Webflow Wishlist

2 Likes

Did you ever find a solution to this?

In Benjamin’s example, in which he specified static data as the source, it should be trivial.

  1. Create the form and the input element in the Webflow designer

  2. Create the static datalist content in an HTML Embed, e.g.

<datalist id="languages">
  <option value="HTML">
  <option value="CSS">
  <option value="JavaScript">
  <option value="Java">
  <option value="Ruby">
  <option value="PHP">
  <option value="Go">
  <option value="Erlang">
  <option value="Python">
  <option value="C">
  <option value="C#">
  <option value="C++">
</datalist>
  1. Specify the datalist is to be used on the textbox. This is done by adding a custom attribute on the input element of list, e.g. list="languages" will bind the textbox to my datalist example here. . The catch here is Webflow has reserved the attribute list and won’t allow you to add it in the designer.

So you need a bit of script;

Add this to your page’s Before </body> tag code part

<script>
$(function() { 
	$("#txt1").attr("list", "languages");
});
</script>

Make sure the ID ( #txt1 above ) matches whatever you’ve assigned to your textbox.

Here’s a simple prototype to see it in action-
https://preview.webflow.com/preview/autocomplete-e62f2a?utm_medium=preview_link&utm_source=designer&utm_content=autocomplete-e62f2a&preview=8d07e609869e904b9cb9c486f9f5989c&workflow=preview

However if you’re needing that list to be dynamic, that takes a bit more creativity. I have a Webflow Util library I’ve built which could be adapted for this. Currently it’s designed to bind collection lists to a SELECT, but it’s very similar to the DATALIST approach.

The documentation is a work in progress, but click the DEMO tab to see Select databinding in action.

1 Like

Works great! Thanks so much. Checking out the dynamic part now.

OK, so watching your video… correct me if I’m wrong, but the ‘dynamic’ part using collections requires a drop-down select correct?

Whereas what we have above is “auto-complete-as-you-type” using a static list via HTML embed.

Exactly, I actually wasn’t even aware of <datalist> before seeing this post.
Pretty cool, but I’m pondering the use cases and how to best add that to my library.

Tell me a bit about your specific use case?

Overall this capability reminds me of the old-style Windows comboboxes, where you have a textbox and a dropdown that are inter-connected. The dropdown provides values to feed the textbox, but unlike a dropdown list or a traditional HTML <select> you’re not limited to the values in the list.

I can see using that in cases like a support form, where I want to ask “what is your question regarding?” and then give some recommendations - but not limit the user.

Well, dropdowns are old school (or so I’ve been told) so auto-complete as you type is desired for modern apps. Essentially, what you are doing with your drop downs now, I need for filtering. I have followed your lead and created a static HTML embed with my “list” - and it works, the only problem is if the list ideally should be connected dynamically to a collection in case the product list changes,

See; Markets

I am struggling with Filter By Lines (try Cannabis which is working) <— the lines really should be dynamic (collection) instead if your hard coded embed.

Hey, I like that.

Thanks for the example- I can see that the auto-complete is more suitable for longer lists, in part because it provides a form of search functionality.

There is a downside though which is that you lose the possibility of item identifiers. In a dropdown, the text is for the user, and the identifier is for the form processor. That enables you to e.g. show a product name to the customer, but capture the SKU in the order processing system.

With auto-complete, that ability disappears, however I actually think I might be able to provide both. I’m in the middle of 2 projects now, so give me a few days to think about this.

The way I’ve done SELECT list binding, the Collection List is first processed into a JSON datasource. I’ll likely build this on top of that, so that you can use anything as a datasource for your autocomplete… including a Google Sheet or a public API call.

This will be fun, thanks for the idea.

1 Like

Feature added.
That was a great addition to polish off release v3.0.

Demo is here, click the DEMO tab

Docs & Install guide are here;
https://sygnaltech.github.io/webflow-util/databinding

Library is here, if you want to poke through the source.

1 Like