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

使用分號在響應結束它是否工作？

$.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 2

我認爲，如果這是你在發回

$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返回的數據，並檢查一切正常

Answer 3

這個jQuery插件。在可能對你有幫助。

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