Блог

Главная - Вопросы по программированию - Автозаполнение 2 полей Jquery

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

#jquery #json #jquery-autocomplete

#jquery #json #jquery-автозаполнение

Вопрос:

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

 <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. можете ли вы подробнее объяснить, что вы хотите сделать? И в чем именно ваша проблема?

2. я хочу автозаполнить <input type=’text’ name=’b’> на основе значения ‘a’ , учитывая, что у вас есть таблица с 2 столбцами, a и b.

3. вы введете ввод «a», и вы хотите автозаполнить ввод «b». я прав? можете ли вы поделиться своими данными JSON, которые возвращаются query.php ?

4. конечно: [[«asd1», «b1»], [«asd2″,»b1»], [«asf1», «b2»]] // asd1, asd2 и asf1 будут представлять некоторые имена или продукты, b1 и b2 — категории, регионы или группы, и да,если я ввожу данные в a, я бы хотел, чтобы b автоматически заполнялся на основе данных внутри таблицы

5. итак, когда вы вводите asd1 в a, b отобразит b1 или asf1 в a, b отобразит b2?

Ответ №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 amp;amp; ui.item.value != "" amp;amp; 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