jquery autocomplete based on 2 input fields using ajax

Question

I have a form with 2 input fields. I would like to implement autocomplete on input 2 using input 1 as a filter. so i need to pass both arguments to my cgi script. i am having issues doing so. i can pass them individually but not a the same time. here what i tried:

function fillbox2(){                                                          

$('#input2').autocomplete({                                              
      source: function(request, response ){                                                               
      var frmStr =  {input1:$('#input1').val(),input2:$('#input2').val()};                                                                     
      $.ajax({                                                            
      url: './cgi_temp2.cgi',                                             
      dataType: 'json',                                                   
      data:{frmStr:request.term},                                      
      contentType: "application/json; charset=utf-8",                     

          success: function (data) {                                      
               response ($.map( data.matches, function(item){             
                           return {                                       
                              value: item.info2,                    

                           }                                              
                       }));                                               
              }                                                           
          });                                                             
      },                                                                  

          minLength: 2,                                                   
          select: function(event, ui){                                    
          $("#input2).val(ui.item.value);                             
          return false;                                                   
          }                                                               
  });                                                                     

}       

where is the issue? is it from "data:" in my ajax call or in "success:"?

Answer 1

As i can see you save data from input in your "frmStr" but in your ajax request, you do that data:{frmStr:request.term}, this mean you are using your variable "frmStr" as key in data and on your back-end you will have frmStr as key . Your data in ajax should look something like that

var frmStr =  {
    input1:$('#input1').val(),
    input2:$('#input2').val(),
    requestTerm: request.term
};

and then in ajax

data:{data: frmStr},

That should work to send data to back-end