JQuery UI : Autocomplete widget

answered 2014-03-20 11:03:39 +0800

cyiannoulis
1201 ● 10

updated 2014-03-20 11:56:40 +0800

Actually it's not that simple - although it is quite simple if you understand the logic. You cannot "make" a zk component to behave like a jQueryUI component directly. What you have to do is to declare a "native" jQueryUI component and then use the zAu.send() to post events to the server.

Here is a complete demo page using the jQuery UI auto complete component:

<?page title="Auto Complete Demo" contentType="text/html;charset=UTF-8"?>
<zk>
<window id="winMain" title="Auto Complete Demo" border="normal" xmlns:n="native" width="100%">

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style src="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"/>

<!-- CLIENT SIDE SCRIPT. NOTICE THAT YOU HAVE TO INIT JQUERY COMPONETS AFTER ZK IS READY -->

<script type="text/javascript">

    zk.afterMount(function() {

        var availableTags = ["Java", "Javascript", "C", "C++", "C#"];

        $("#txtSearchField").autocomplete({
            source: availableTags
        });
    });

    /* 
     This function will be fired when you press CR in the search box.
     The zAu.Send will post an event to the server with the selected search value.   
    */  
    function doSearch() {
        var searchValue = $("#txtSearchField").val();       
        zAu.send(new zk.Event(zk.Widget.$('$winMain'), 'onSearch', searchValue));
    }

</script>

<!-- SERVER SIDE SCRIPT. NORMALLY THIS CODE SHOULD ME PLACED INSIDE A COMPOSER OR A VIEW MODEL -->

<zscript><![CDATA[

    /*
      Create a new event listener to catch the event posted from the client.
      Normally the event handling should be done inside a SelectorComposer or the ViewModel class.
      I am doing this here for simplicity.
    */
    org.zkoss.zk.ui.event.EventListener listener = new org.zkoss.zk.ui.event.EventListener() {
        public void onEvent(Event event) {
            if (event.getName().equals("onSearch")) {
                String searchValue = (String) event.getData();
                txtResult.setValue("Now searching for " + searchValue);
            }
        }
    };      
    winMain.addEventListener("onSearch", listener);

]]></zscript>

<vlayout hflex="true">

    <hlayout>
        <!-- Here is the native jquery component -->
        <n:input id="txtSearchField" placeholder="Search for..." 
                     onkeydown="if (event.keyCode == 13) doSearch()" />

        <label value="(Type something like 'Java', 'C' and press Enter)" />
    </hlayout>

    <label id="txtResult" style="font-weight: bold;" />

</vlayout>

</window>
</zk>

I have a question though... why do you need to do all this when you have zk componets like <combobox> and <listbox> which offer the auto completion functionality out-of-the box? Of course the intergration with native jQuery plugins is very useful if you whish to embed some more complex native widgets which are not offered directly as zk components.

Hope that helps, Costas.