Add a CSS class to MktoForm field

[TBlane_McMichen]

Related to this thread, I want to add an autocomplete feature to one of the fields to avoid a long select list.  I found this JS that will do the job... Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou

The trick is to add a class to the field (<input class="awesomplete" ...) but i don't see how to do that.  Any ideas?

[SanfordWhiteman · Accepted solution]

Awesomplete has multiple methods of binding data lists to inputs.

The CSS class is the declarative method, and that isn't the best choice for forms libraries like Marketo's, which inject forms asynchronously into the page.

Instead, use the programmatic method, as shown here: MktoForms2 :: Awesomplete

[TBlane_McMichen]

Perfect! 

Just what I needed.  Thanks!

[TBlane_McMichen]

Is there a way to change the code and datalist, so I the user can pick their Full Name and Awesomplete will populate their First name, Last name, Email address, and Phone into hidden fields?

[TBlane_McMichen]

Sanford Whiteman​ i looked in your codepen and what i need is similar to your Google Places Autocomplete, but I need to be able to provide the data.

[SanfordWhiteman]

Well, the way GP Autocomplete works is very different, so I wouldn't take any guidance from that!

With Awesomeplete you can do it like this.

[TBlane_McMichen]

Thank you Sanford Whiteman for your help.  It works very well.

I modified it to complete multiple fields by doing this...

dataList: {
     "Bob" : { "LastName" : "Hoskins", "Phone" : "111-555-3333" },
     "Barbara" : { "LastName" : "Bel Geddes", "Phone" : "222-555-4444" },

     "Charlize" : { "LastName" : "Theron", "Phone" : "333-555-4444" },

}

... not that you wouldn't know, but for others that may find this thread at a later date.