Jquery 自动完成 2 字段

发布于 2024-12-09 04:53:37 字数 1429 浏览 1 评论 0原文

我有以下页面：

<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 数据的 query.php

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

我试图弄清楚，但我无法理解它（大约一周或所以）。

先感谢您。

原文

I have the following page :

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

The query.php that returns 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);

The Database contains 2 rows, obviously a and b.

The question is : how can I alter the current script in order to autocomplete both a and b where a corresponds to b in the mysql database

I tried to figure it out but I couldn't wrap my head around it (for about a week or so).

Thank you in advance.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

葬シ愛 2024-12-16 04:53:37

我认为您希望 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 自动完成，使用当前的 jQuery 1.6.4版本

I would think you would want your JSON to be of the form [{"a":"asd1","b":"b1"},{"a":"asd2","b":"b1"}...] then you could process it using a parse function like so:

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

You could then call this from the ajax so:

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

then in the autocomplete handle it in the select:

...
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;
    }
},
...

Assumptions here: using the jQuery UI Autocomplete, using current jQuery 1.6.4 version

回复收藏 0 原文

~没有更多了~