passing an extra parameter in URL using jquery autocomplete

i am trying to send an extra parameter (other than the typed key) to my controller using jquery Autocomplete , i tried to append it to the url like below but for some reason the parameter is always empty, here is my code:

$(document).ready(function(){
$('#classDefNode').each(function() {

    $(this).autocomplete({
            type:"POST",
            serviceUrl: '${pageContext.request.contextPath}/getClassDefinitionName?interfaceName='+$("#interfaceDefNodeIOS").val(),
            paramName: "className",
            delimiter: ",",


            transformResult: function(response) {
            return {        
              //must convert json to javascript object before process
              suggestions: $.map($.parseJSON(response), function(item) {

                  return { value: item.name, data: item.id };
               })

             };

                }

         });
});
});

i think that the problem is that the .ready(function()) is executed when the page load and at the time the input is still empty. i also tried to use boostrap typeahead but i couldn't make it work, it showed bad request in chrome console. many thanks for your help.

You are initializing the autocomplete objects with serviceUrl: 'stuff'+$("#interfaceDefNodeIOS").val(). At init time, $("#interfaceDefNodeIOS") is empty, right? So you init the autocompletes with an empty parameter. This parameter won't automatically get updated as you type something in the input fields. The autocompletes are already initialized.

From the doc, use :

params: Additional parameters to pass with the request, optional.