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

我认为如果这是你送回的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，你可以在console.log中返回数据并检查一切正常

Answer 3

在响应结束时使用分号是否有效？

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

jqueryui自动完成自定义数据，列表创建

3 个答案: