Simply play with the properties on the Widget Properties tab, click the Update button to regenerate the C#, HTML and JavaScript. Once the page has loaded have a look at the Widget Methods tab to see how you can interact with the widget.
jQuery Events Log
Tick the Show & Render Events checkbox to start showing the events (and click Update).
Here are the methods available for the jQuery UI control, have a click on the buttons and see how the behaviour of the control changes.
Below is the code required to use the options you have selected above.
<% Html.CreateAutoComplete("ac", availableTags) .Options .Finish() .Options .Position .SetAt("left", "bottom") .SetMy("left", "top") .Finish() .Finish() .Events .SetCreateEvent("createEvent(event, ui);") .SetSearchEvent("searchEvent(event, ui);") .SetResponseEvent("responseEvent(event, ui);") .SetOpenEvent("openEvent(event, ui);") .SetFocusEvent("focusEvent(event, ui);") .SetSelectEvent("selectEvent(event, ui);") .SetCloseEvent("closeEvent(event, ui);") .SetChangeEvent("changeEvent(event, ui);") .Finish() .Render(); %>
Which produces the following HTML mark-up.
The HTML for the AutoComplete demo has been produced with normal HTML.
Which initialises the control with the following [generated] JavaScript.
Notice how Fluqi generates the minimum JavaScript necessary to configure the widget, minimising the download to the browser.