Jquery Автозаполнение 2 поля - PullRequest
Новая
       11

Jquery Автозаполнение 2 поля

0 голосов
/ 12 октября 2011

У меня есть следующая страница: 

<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 соответствует b в базе данных mysql

Я пытался это выяснить, но не мог обернуть голову (около недели или около того).

Заранее спасибо.

1 Ответ

0 голосов
/ 12 октября 2011

Я думаю, вы захотите, чтобы ваш 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, использование текущей версии jQuery 1.6.4

...