Question

我有以下页面：

<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>

返回query.php

的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。

问题是：如何更改当前脚本以自动完成a和b，其中a对应于mysql数据库中的b

我试图想出来，但我无法绕过它（约一个星期左右）。

提前谢谢。

Answer 1

我认为您希望您的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;
};

然后你可以从ajax中调用它：

...
    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 Autocomplete，使用当前的jQuery 1.6.4版本

Jquery自动完成2个字段

1 个答案: