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.code assembly.com/Simple-chained-combobox- 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
                 } 
        }));
    }
}); 

编辑：也许是解析结果的另一种方法（假设您关于返回数据的声明是正确的 - 取消注释下面的alert()以确保确定。

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

在任何情况下，如果您安装了 firebug，您可以 console.log 返回的数据并检查一切是否正常