Jquery или Javascript: автозаполнение из JSON для нескольких полей формы

Question

У меня есть форма с полем ввода текста с именем "Building_N"; Форма также имеет несколько скрытых полей, которые необходимо заполнить из внешнего файла JSON. В настоящее время файл представляет собой текстовый файл с данными, такими как:

[
  {
   "buildingname":"building1",
   "floorplanlayer":"floorurl",
   "roomlayer": "roomurl",

  },
  {
   "buildingname":"building1",
   "floorplanlayer":"floorurl",
   "roomlayer": "roomurl",
 }
]

Я хотел бы использовать либо JQUERY, либо javascript, чтобы позволить пользователям выбирать значение 'buildingname' и, если они это выбирают, заполнять скрытые поля значениями 'floorplanlayer' и 'roomlayer'.

Я не нашел ни одного примера, который позволил бы мне сделать это. Самое близкое, что я обнаружил, - это использование события Onkeyup для загрузки данных JSON, а затем сопоставления с помощью регулярного выражения, но это не давало пользователям возможности выбирать, а также выбирать при первом сопоставлении символов.

Спасибо!

Answer 1

Взгляните на эту популярную библиотеку автозаполнения: https://github.com/devbridge/jQuery-Autocomplete

Это более надежно, чем автозаполнение традиционного пользовательского интерфейса jQuery. Вот как я бы пошагово решил проблему, используя API, предоставляемый библиотекой:

1. Разобрать файл JSON в объект JavaScript.
2. Создайте массив из всех buildingname ценности.
3. В опциях автозаполнения установите lookup атрибут вашего построенного массива.
4. Установить onSelect атрибут функции обратного вызова, которая находит объект, связанный с buildingname они выбрали и установили скрытые поля здесь.

Это должно сделать то, что вы пытаетесь выполнить, намного проще, чем самостоятельно заниматься автозаполнением.

Answer 2

Вот как я заставил это работать; Обратите внимание, что автозаполнение возвращает все значения, потому что до сих пор я не могу найти способ, чтобы данные JSON соответствовали только начальному слову. Но я думаю, что это будет для другого вопроса:

        $("#Building_N").autocomplete({
                 open: function(){
                 setTimeout(function () {
                       $('.ui-autocomplete').css('z-index', 99999999999999);
                 }, 0);
                },
                source: function( request, response ) {
                $.ajax({
                    url: "_buildingdata.txt",
                    dataType: "json",
                    data: {term: request.term},
                    success: function(data) {
                                response($.map(data, function(item) {
                                return {
                                    label: item.buildingname,
                                    value: item.buildingname,
                                    hidroom: item.roomlayer,
                                    hidfloor: item.floorplanlayer

                                    };
                            }));//response
                        }//success
                    });//ajax
                },//source
                minLength: 3,
                select: function(event, ui) {
                    console.dir(ui);
                    $('#Building_N').val(ui.item.buildingname);
                    $('#hid_roomdata_layer').val(ui.item.hidroom);
                    $('#hid_floorplan_layer').val(ui.item.hidfloor);
                }
         });