Checkbox for autocomplete

[fuljoyment]

hi I am using Autocomplete in the textbox field for the remote header filtering. Right now the user is able to select one item from the list generated using autocomplete.  Is it possible to create check box for the all the items that are generated in autocomplete, so that the user can select multiple options and filter for them? if so how?
My present code is below

{
            title: "xyz", width: 100, dataIndx: "xyz",
            filter: {
                type: "textbox",
                condition: 'equal',
                listeners:  'change',
                init: function () {
                    $(this).autocomplete({
                        source: "userpage1/getresult",
                        selectItem: { on: true },
                        highlightText: { on: true },
                        minLength: 0,
                        delay: 500
                    }).focus(function () {     
                        $(this).autocomplete("search", " ");
                    });
                   
                }
            }
        },

I have one more problem, When a user types something in the filter textbox and hits enter, the page is redirected to default page. Can you please let me know how i can stop the page from being redirected to default application page.

Thank you in advance.

Jabez.

[paramvir]

Your question is more suitable for jQueryui forums.

I don't see any inbuilt configuration option to add checkboxes in autocomplete. One possibility is to do custom rendering of items in autocomplete with _renderItem option.

http://api.jqueryui.com/autocomplete/#method-_renderItem

http://stackoverflow.com/questions/30930459/add-checkbox-to-auto-complete-jquery

[fuljoyment]

Hi,
I found a solution to autocomplete using jquery. Thank you for your reply and support.
the code i am using now is:
  title: "xyz", width: 100, dataIndx: "xyz",
            filter: {
                type: "textarea",
                condition: 'equal',
                listeners:  'change',
            init: function () {
                    $(this).autocomplete({
                        source: "userpage1/getresult",
                        selectItem: { on: true },
                        highlightText: { on: true },
                        minLength: 0,
                        delay: 500,
                        select: function (event, ui) {
                            var terms = split(this.value);
                            terms.pop();
                            terms.push(ui.item.value);
                            terms.push("");
                            this.value = terms.join(", ");
                            return false;
                        }
                    });
                }

function split(val) {
        return val.split(/,\s*/);
    }

The above code is working fine with Firefox browser. but in other browsers like IE and Chrome, the 'change' event is not fired. i tried using tab and clicking on another control without any positive result. Can you please help me to resove this browser difference for this change event.

Thank you.

[paramvir]

Please use listeners:  ['change']