Alloy UI Autocomplete

Here is the example for Alloy UI autocomplete

first we need to construct json array


                try
                {
                      JSONObject jsonObj;
                List<Customer> customer = CustomerLocalServiceUtil.getCustomers(0, CustomerLocalServiceUtil.getCustomersCount());
                 jsonObj = JSONFactoryUtil.createJSONObject();
                 jsonObj.put("customerId"  , "ALL");
                 jsonObj.put("fsIdentifier", "ALL");
                 jsonObj.put("vfIdentifier", "ALL");
                 jsonObj.put("Company", "ALL");
                 jsonObj.put("email", "ALL");
                 jsonArray.put(jsonObj);
                for(Customer cust:customer)
                {
                     jsonObj = JSONFactoryUtil.createJSONObject();
                     jsonObj.put("customerId"  , cust.getCustomerId());
                     jsonObj.put("fsIdentifier", cust.getFsIdentifier());
                     jsonObj.put("Company", cust.getCompanyName());
                     jsonObj.put("vfIdentifier", cust.getVfIdentifier());
                     jsonObj.put("email", cust.getEmail());
                     jsonArray.put(jsonObj);
                }

                }catch(Exception e)
                {
                  e.printStackTrace();
                }

                 returnJSONArray(resourceResponse, jsonArray);

AUI().ready('aui-autocomplete', 'aui-io-request', function(A) {


        var resourceUrl = "<portlet:resourceURL />";
        getCustomers = function() {
            var url = resourceUrl;
            A.io.request(url, {
                method : "GET",
                data : {
                    "cmd" : "get-customers"
                },
                dataType : 'json',
                on : {
                    success : function() {
                        autoComplete(this.get('responseData'));
                        autoCompletecompany(this.get('responseData'));
                        autoCompletevfidentifier(this.get('responseData'));
                        autoCompleteemail(this.get('responseData'));

                    },
                    failure : function(xhr, ajaxOptions, thrownError) {
                        displayError("Error getting the list of products");
                    }
                }
            });
        };

    autoComplete = function(data) {
            var autoComplete = new A.AutoComplete({
                dataSource : data,
                forceSelection : true,
                maxResultsDisplayed : data.length,
                schema : {
                    resultFields : [ 'customerId', 'fsIdentifier' ]
                },
                matchKey : 'fsIdentifier',

                typeAhead : true,
                input : '#<portlet:namespace/>customerSelected',
                contentBox : '#cutomersId'
            }).render();
            autoComplete.on('itemSelect', function(event, item) {
                A.one("#customerSelectedid").val(item.customerId);
                A.one("#companyvalueselectid").val(item.fsIdentifier);

            });


        };