基于2个输入字段的值进行ajax调用以填充jquery自动完成

Question

I have been stuck with this problem for a while. I would like to pass 2 arguments (the value of 2 input fields of one form) in my ajax call to be used for a jquery autocomplete (the search is based on a mysql query using the values of input1 and input2). I had a few suggestions but so far i have no luck: here my ajax call trying to pass the 2 arguments input1 and input2. there is no code error showing up but the autocomplete does not work. it is working if i am using only one argument.

function fillbox2(){                                                          

$('#input2').autocomplete({                                              
      source: function(request, response ){                               

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

      $.ajax({                                                            
      url: './cgi_temp3.cgi',                                             
      dataType: 'json',                                                   
      data:{data: frmStr},                                                
      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){                                    
          $("#prod_term").val(ui.item.value);                             
          return false;                                                   
          }                                                               

   });

and here my cgi script that process the MYSQL query

 #!/usr/local/bin/python3                                                      

  import cgi, json                                                              
  import os                                                                     
  import mysql.connector                                                        

 def main():                                                                   
   print("Content-Type: application/json\n\n")                               
   form = cgi.FieldStorage()                                                 
   term2 = form.getvalue('input2')                                        

   term1=form.getvalue('input1')                                        

   conn = mysql.connector.connect(user='***', password='***', host='localhost', database='***') 
   cursor = conn.cursor()                                                    

 qry = """                                                                 
      SELECT name2, info2                               
      FROM table2                                                          
      join table1 ON                                                    
      info2_id=information2_id                                                  
      WHERE name2 LIKE %s AND info2_id=%s                       
"""                                                                       
cursor.execute(qry, ('%' + term2 + '%',term1))   

where could be the problem?

Answer 1

At first glance I'd say it's possibly a timing issue. The source function isn't going to wait for your ajax call to complete, so you're essentially giving it a blank value. Try initiating the autocomplete inside the ajax success function.

function fillbox2(){                                                          
  $.ajax({
    ...
    success: function (data) {
      ...
      $('#input2').autocomplete(...);
  });
}