jqueryui autocomplete custom data, list creation

I'm building a form where the first field restricts what's available in the second, and the second restricts what's available in the third.

I'm trying to use Jqueryui autocomplete for this, but am running into an issue. I've tried a number of other sources online but can't seem to get it to take. I am new to customizing widgets, which may explain the problem.

Currently, I am able to properly post and receive data from my php file (fo开发者_如何学Cund below), but the autocomplete doesn't yet display the information it finds. The data is there, I am simply unable to get it into the pop-down list.

Thoughts?

$(".tiers input[type='text']").autocomplete({
    source: function( request, response )
    {            
    var $form_data=$('.tiers').parents('form').serialize();
        $.ajax({
              url: "issue_autocomplete.php",
              type: "POST", 
              dataType: "json",  
              data:$form_data,                                                      
                  success: function(data){
                     response($.map( data, function(item){
                      return{      
                         label:item.tier1,
                         value:item.tier1                      
                      }
                 }))
              }
        });

                    },
                    minLength: 2
                });

And the php (which is retrieving information just fine)

$tier1=mysql_real_escape_string($_POST['tier1']);
$tier2=mysql_real_escape_string($_POST['tier2']);
$tier3=mysql_real_escape_string($_POST['tier3']);

if($tier1!=''){
     $query = mysql_query("SELECT * FROM varIssues WHERE tier1 LIKE '$tier1%'");  
}

if($tier2!=''){
    $query = mysql_query("SELECT * FROM varIssues WHERE tier1='$tier1' AND tier2 LIKE '$tier2%'");  
}

if($tier3!=''){
    $query=mysql_query("SELECT * FROM varIssues WHERE tier1 = '$tier1' AND tier2 ='$tier2' AND tier3 LIKE '$tier3%'");
}
    //build array of results  
    for ($x = 0, $numrows = mysql_num_rows($query); $x < $numrows; $x++) {  
        $row = mysql_fetch_assoc($query);  
        $issues[$x] = array('tier1'=>$row["tier1"],'tier2'=>$row['tier2'],'tier3'=>$row['tier3']);  
    }  

    //echo JSON to page  
    $response = $_GET["callback"] . "(" . json_encode($issues) . ")";  
    echo $response;  

---

This jQuery plug-in may be helpful to you.

http://www.codeassembly.com/Simple-chained-combobox-plugin-for-jQuery/

---

With the semicolon at the end of the response does it work?

$.ajax({
    url: "issue_autocomplete.php",
    type: "POST",
    dataType: "json",
    data:$form_data,
    success: function(data){
        response($.map( data, function(item){
           return{
                  label:item.term1,
                  value:item.term2
                 } 
        }));
    }
}); 

Edit: another way to parse out the results perhaps (assumption your statement about the returned data IS correct - uncomment the alert() below to know for sure.

function autocompleteJSONParseCode(data) {
  var rows = new Array();
  var rowData = null;
  for (var i = 0, dataLength = data.length; i < dataLength; i++) {
    rowData = data[i];
   // alert(rowData.term2+":"+rowData.term1);//uncomment to see data as it parses
    rows[i] = {
       value: rowData.term2,
       label: rowData.term1
    };
  }

  return rows;
};
$(".tiers input[type='text']").autocomplete({
    source: function( request, response ) {
      var $form_data=$('.tiers').parents('form').serialize();
      $.ajax({
        url: "issue_autocomplete.php",
        dataType: "json",
        type: "POST",
        contentType: "application/json",
        data:$form_data,
        success: function(data) {
          var rows = autocompleteJSONParseCode(data);
          response(rows);
        }
      });
    },
    minLength: 2
});

---

I think that if this is the json you are sending back

$issues[$x] = array('tier1'=>$row["tier1"],'tier2'=>$row['tier2'],'tier3'=>$row['tier3']);  

You should access it like this

            success: function(data){
                 response($.map( data, function(item){
                  return{      
                     label:item.tier1,
                     value:item.tier2                      
                  }
             }))
          }

In any cas if you have firebug installed you could console.log the data returned and check that everything is ok