jqueryui автозаполнение пользовательских данных, создание списка

Question

Я создаю форму, в которой первое поле ограничивает то, что доступно во втором, а второе ограничивает то, что доступно в третьем.

Я пытаюсь использовать автозаполнение Jqueryui для этого, но я запускаюв вопрос.Я пробовал много других источников онлайн, но, кажется, не могу заставить это взять.Я новичок в настройке виджетов, которые могут объяснить проблему.

В настоящее время я могу правильно отправлять и получать данные из моего файла php (см. Ниже), но автозаполнение еще не отображает информацию, которую ононаходит.Данные есть, я просто не могу получить их во всплывающем списке.

Мысли?

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

И php (который получает информацию просто отлично)

$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;  

Answer 1

Этот плагин jQuery может быть полезен для вас.

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

Answer 2

С точкой с запятой в конце ответа это работает?

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

Редактировать: возможно, еще один способ анализа результатов (если ваше утверждение о возвращенных данных верное - раскомментируйте предупреждение () ниже, чтобы знать наверняка.

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

Answer 3

Я думаю, что если это json, который вы отправляете обратно

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

Вы должны получить к нему доступ следующим образом

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

В любом cas, если у вас установлен firebug, вы можете утешить.log возвращенные данные и проверьте, что все в порядке