JQuery Автозаполнение - PullRequest
Новая
       0

JQuery Автозаполнение

2 голосов
/ 13 декабря 2010

У меня проблема с удаленным автоконкурентом jquery

Я получаю объект json с сервера в этом формате 

[{"id":"4cd8d3b37adf3515c800003e","name":"University of Alberta"},
 {"id":"4cd8d3b37adf3515c800003f","name":"Athabasca University"},
 {"id":"4cd8d3b37adf3515c8000040","name":"University of Calgary"},
 {"id":"4cd8d3b37adf3515c8000041","name":"University of Lethbridge"},
 {"id":"4cd8d3b37adf3515c8000042","name":"Mount Royal University"},
 {"id":"4cd8d3b37adf3515c8000043","name":"University of Toronto"},
 {"id":"4cd8d3b37adf3515c8000045","name":"Queens University"},
 {"id":"4cd8d3b37adf3515c8000046","name":"University of Waterloo"},
 {"id":"4cd8d3b37adf3515c8000047","name":"McGill University"},
 {"id":"4cd8d3b37adf3515c8000048","name":"University of British Columbia"},
 {"id":"4cd8d3b37adf3515c8000049","name":"University of Saskatchewan"},
 {"id":"4cec8ead7adf3502a100001f","name":"University of Alberta"}]

Теперь мне нужно только показать названия университетав списке автозаполнения и заполнить соответствующий идентификатор в одном скрытом поле, когда пользователь выбирает университет.

Я пытался переместить aroung formatResult и formatItem с этим объектом json, но не мог понять, как выполнить автозаполнение.

Было бы полезно, если бы кто-нибудь объяснил, как применять formatResult и formatItem методы автозаполнения jquery с объектами json

Спасибо

Ответы [ 2 ]

1 голос
/ 13 декабря 2010

Я делаю что-то подобное, но у меня также есть изображения в моих результатах. Как видите, мой код поддерживает множественный выбор. 

formatItem: function (row, i, n) {
            return '<table><tr><td valign="top"><img src="' + row.ImageUrl + '" /></td><td valign="top">' + row.DisplayName + '</td></tr></table>';
        },
formatResult: function (row, i, n) {
            return row.Id;
        }
}).result(function (event, data, formatted) {
        var results = $("#selectedItems").val();
        $("#selectedItems").val(results + ";" + data.Id)
    });

так что для вас, я бы попробовал это 

formatItem: function (row, i, n) {
            return '<span>' + row.name+ '</span>';
        },
formatResult: function (row, i, n) {
            return row.id;
        }
}).result(function (event, data, formatted) {
        $("#myHiddenField").val(data.id)
    });

EDIT: Добавлена ​​функция результата для помещения идентификатора в скрытое поле

0 голосов
/ 14 декабря 2010

Вы можете использовать getJson для получения данных i, а затем использовать что-то вроде этого, чтобы сделать его автокомплитным 

<body>
    <br /><br />API Reference: <input id="example" /> (try "U")<br /><br />
    ID for selectet university <span id="UniID"></span>
    <script type="text/javascript">
        $(function() {
            $.getJSON('JSonUni.txt' , function(autoData) { // Get the data for autocomplite
                $("#example").autocomplete(autoData, {
                    formatItem: function(item) {
                        return item.name;
                    }
                }).result(function(event, item) {
                    $('#UniID').text(item.id);
                });
            }); // end JSON
        }); // End function
    </script>
</body>

Также включите эти строки 

<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...