Back to Questions
447
views2
comments
Integrating 3rd party auto-complete library into UI.Next
websharper

In this example (http://try.websharper.com/snippet/user4207/0000Bt) I'm trying to integrate an auto-complete library (https://leaverou.github.io/awesomplete/) into a trivial UI.Next application. I've managed to get the library initialised, so it succeeds in turning an input into an autocomplete control, but in doing so it has messed up the reactive bindings: the text that I type into the input is reflected in the div below, but if I then select one the of autocomplete suggestions, the change is not reflected in the div.

I've tried another library as well (https://select2.github.io/) and it has similar problems. Is this just a limitation of UI.Next? And if so, is the solution to write my own autocomplete functionality directly using UI.Next?

.

Looking into it in detail, these two libraries have a different problem with the same consequence: UI.Next doesn't detect their events. Fortunately both are fixable with a little bit of code which I posted here.

  • Awesomplete doesn't trigger the change event at all, instead it uses a custom jQuery event awesomplete-selectcomplete. We can just listen to that event and trigger change ourselves.

  • Select2 triggers the change event as a jQuery event, whereas UI.Next listens to the DOM event. Again we can trigger the DOM event from a jQuery listener, with a bit of extra trickery to avoid infinite recursion (since the DOM event in turn triggers a new jQuery change event).
By on 1/14/2017 4:16 AM ()

Thanks for the excellent example solution! I would never have figured that out by myself.

By on 1/14/2017 12:53 PM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper