ajax call based on the value of 2 input fields to populate jquery autocomplete

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?

score 0 · Answer 1 · answered Apr 22 '18 at 00:38

0

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(...);
  });
}

answered Apr 22 '18 at 00:38

PoorlyWrittenCode

1,003
1
7
10

thank you for your "out-of-the-box" thinking. but it is working for one argument. so if it was a timing issue then I should get the same issue that I have with 2 arguments. i am fairly new to javascript, moving the autocomplete inside created a lot of formatting issues. ajax is inside source. does that mean that source goes inside ajax as well? – ApisMel Apr 22 '18 at 15:22
After looking at the documentation and some other posts, it appears the response parameter is expecting an asynchronous callback. So my next guess would be there's an issue with the data you're sending to response. Try console logging your $.map and make sure it's returning what you expect and that it is formatted correctly. https://api.jqueryui.com/autocomplete/#option-source https://stackoverflow.com/questions/5077409/what-does-autocomplete-request-server-response-look-like – PoorlyWrittenCode Apr 23 '18 at 14:12

ajax call based on the value of 2 input fields to populate jquery autocomplete

1 Answers1