JQuery AutoCompleteUI with custom parameter...

When we work with JQuery AutoCompleteUI sometimes we need to pass additional parameter to the server to filter the Resul/AutoComplete data. To send additional data we need to work a little bit more. here I'm showing how we can achieve our goal:


 $("#TextBox").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Accounting/Group/GetGroupNameJson/",  <===== your URL (I's working on MVC)
                datatype: "json",
                data: {
                    filter: $("#dropdown").val(), <========= the value of dropdown list need for filtering
                    term: request.term               <=========this term will be automatic found from #TextBox
                },
                success: function (data) {
                    response(data); <this data contains not only 'label' but also 'value'
                }
            });
        },
        minLength: 1, <==============min length to start search
        select: function (event, ui) {
            event.preventDefault(); <=== this line required
            $('input[name="ThisField"]').val(ui.item.label);
            $('input[name="AnotherField"]').val(ui.item.value);
            return false;
        },
        focus: function (event, ui) {
            event.preventDefault();
            $("#ThisField").val(ui.item.label);
        },
        //position: { my: "right bottom", at: "left top", collision: "flip" },
    });