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

我正在构建一个表单，第一个字段限制第二个字段中可用的内容，第二个字段限制第三个内容中可用的内容。jqueryui自动完成自定义数据，创建列表

我想为此使用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;

来源

2011-08-05 samuel

使用萤火虫或IE开发者工具，把一个破发点中你的成功回调，特别是在匿名函数是p rocesses'item'并返回一个包含标签和值属性的对象。只是猜测，我会说你的fn没有被调用，或者项目没有通过tier1的名称公开属性。但是，在调试器中很容易看到。不需要猜测。 – Cheeso

使用分号在响应结束它是否工作？

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

来源

2011-08-05 19:41:19

修好了，没有这样的运气 – samuel

早上上班时我会试试这个。感谢您的支持。 – samuel

我认为，如果这是你在发回

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

的JSON你应该访问它像这样

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

在任何CAS如果你有萤火虫安装，你可以console.log返回的数据，并检查一切正常

来源

2011-08-05 19:17:16

修正了这个错字，但还是没有处理。与萤火虫我可以看到，它正在返回数据正确，这是显示器似乎是问题。 – samuel

这个jQuery插件。在可能对你有帮助。

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

来源

2011-08-09 13:55:26 toddem

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

回答

相关问题