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场

回答

相关问题