jQuery的自動完成2場

我有以下頁面：jQuery的自動完成2場

<html> 
<head> 
<link type="text/css" href="css/smoothness/jquery-ui-1.8.14.custom.css" rel="stylesheet" /> 
<style type='text/css'> 

    .ui-menu-item { 

     font-size:50%; 

    } 

    </style> 

    <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> 
    <script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script> 

    <script type="text/javascript"> 

    $(function() { 

     $("#a").autocomplete({ 

      source: "query.php", 
      minLength: 2 

     }); 

    }); 

    </script> 

</head> 

<body> 

    <form action="todo.php" method="post"> 

    A <input type='text' name='a' id='a'><br/> 
    B <input type='text' name='b' id='b'><br/> 

    </form> 

</body> 

</html>

返回JSON data

include("connect.inc.php"); 

$query = mysql_query("SELECT a, b FROM table WHERE a LIKE '%".mysql_real_escape_string($_GET['term'])."%' ORDER BY a ASC LIMIT 0,10") or die(mysql_error()); 

$data = array(); 

while($row = mysql_fetch_assoc($query)) { 

    $data[] = $row['a']; 

} 
    include("close.inc.php"); 
    echo json_encode($data);

數據庫包含2行，顯然A和B query.php。

的問題是：我怎樣才能改變當前腳本，以自動完成A和B，其中一個對應於在mysql數據庫B

我試圖弄明白，但我不能換我的頭在它周圍（大約一週左右）。

預先感謝您。

來源

2011-10-12 cristi _b

你能解釋更多你想做什麼？你的問題到底是什麼？ – erimerturk

我想基於'a'的值自動完成，因爲您有一個包含2個列的表，a和b。 –

您將輸入「a」，並且您想要自動輸入「b」。我對嗎？你能分享你的JSON數據返回query.php？ – erimerturk

我想你想你的JSON是形式[{"a":"asd1","b":"b1"},{"a":"asd2","b":"b1"}...]的，那麼你可以使用它解析功能，像這樣的過程：

：

function myAutocompleteJSONParse(data) 
{ 
    var rows = new Array(); 
    var rowData = null; 
    for (var i = 0, dataLength = data.length; i < dataLength; i++) 
    { 
     rowData = data[i]; 
     rows[i] = { 
      value: rowData.A, 
      label: rowData.A, 
      A: rowData.A, 
      B: rowData.B 
     }; 
    } 
    return rows; 
};

然後，您可以從阿賈克斯所以叫這個

... 
    success: function(data) 
    { 
     if (!data || data.length == 0) 
     { 
      var rows = new Array(); 
      rows[0] = { A: 'Not Found', 
       B: '' 
      }; 

      response(rows); 
     } 
     else 
     { 
      var rows = myAutocompleteJSONParse(data); 
      response(rows); 
     } 
    } 
...

然後在自動完成處理它的選擇：

... 
select: function(event, ui) 
{ 
    var hasValue = (ui.item.value != undefined && ui.item.value != "" && ui.item.value != null); 
    if (hasValue) 
    { 
     var focusedElement = $(this); 
     focusedElement.val(ui.item.label); 
     $("#b").val(ui.item.B); 
     return false; 
    } 
    else 
    { 
     return false; 
    } 
}, 
...

假設在這裏：使用jQuery UI自動完成，使用當前的jQuery 1.6.4版本

來源

2011-10-12 14:40:04

jQuery的自動完成2場

回答

相關問題