Typeahead.js: Cloning a typeahead element using JQuery .clone()

[palintropos]

I've got an existing HTML form with jQuery enhancements that uses .clone() in a couple of places to insert or remove form inputs. I'm trying to integrate it with typeahead.js 0.9.2 now, and a cloned typeahead doesn't seem to be functional. I haven't figured out what to change to make this work, or pinpointed what causes it to malfunction, and hoped maybe the community can help.

I have put together the following simplified fiddle in order to both show what I'm trying to do, and also to demonstrate the way .clone() affects the typeahead plugin:

http://jsfiddle.net/AzSgy/8/

If there is another way that I could be doing this besides using .clone(), or you have any suggested improvements to my methods, I am more than happy to listen to these types of solutions as well. Thanks in advance.

[palintropos]

I fixed this by calling typeahead again on the inserted element with the same options. This fixes all but the edge case where the input is cloned with the suggestion box open, and I guess that's probably normal given the way .clone() works.

[palintropos]

For future reference, I'd like to mention that in order to get my solution completely going using .clone(), I actually had to call .typeahead('destroy'), THEN clone, and then reinstate them. This happens quickly and they don't lose their values, so it's not a bad solution at all.

[jeffbowen]

Thanks for the tip @palintropos! I had a related problem that was solved by destroying the typeahead BEFORE cloning, then reinstating it.

[robbprescott]

Thanks so much @palintropos, this tip still works!