JQuery Автозаполнение для применения рельсов

Question

Мне нужно использовать автозаполнение в приложении рельсов.Которые используют комбо-бокс в качестве источника.Я использовал jquery autocomplete и combobox.

Но мне нужна дополнительная функция.Предположим, что мы набираем «Apple», и он не доступен в режиме автозаполнения, он показывает новый элемент в списке с именем «Создать новое яблоко», если мы выбираем его, запускается событие JavaScript.так что мы можем открыть некоторый диалог, чтобы добавить его.

Более того, автозаполнение также может быть обновлено после рендеринга.Значит, если мы добавим новую запись, ее также можно будет заполнить в списке.

Надеюсь получить хорошие вещи от вас, ребята.

Answer 1

Я полностью заполнил свой сценарий этим кодом. Я изменил код с сайта jquery, изменив рефакторинг события изменения на.

 auto_obj.change = function(event, ui) {
       if (!ui.item) {
      var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
                    valid = false;
      select.children("option").each(function() {
         if ($(this).text().match(matcher)) {
            this.selected = valid = true;
               return false;
         }
      });
      if (!valid) {
          // Trigger the event for value not found
          $(select).trigger('autocompletenotfound', $(this).val());

          // remove invalid value, as it didn't match anything
          $(this).val("");
          select.val("");
          input.data("autocomplete").term = "";
          return false;
      }
  }
}

и в функции источника

auto_obj.source = function(request, response) {
                var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                var match = false;

                response(select.children("option").map(function(i, value) {
                    var text = $(this).text();
                    if (this.value && ( !request.term || matcher.test(text) )) {
                        match = true;
                        return {
                            label: text.replace(
                                    new RegExp(
                                            "(?![^&;]+;)(?!<[^<>]*)(" +
                                                    $.ui.autocomplete.escapeRegex(request.term) +
                                                    ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                            ), "<strong>$1</strong>"),
                            value: text,
                            option: this
                        };
                    }
                    if (!match && i == select.children("option").size() -1 && self.options.allow_new ) {
                        return {
                            label:'Create new <strong>'+ input.val() +'</strong>',
                            value: input.val(),
                            option: null
                        };
                    }
                }));
            };

Это выполнило мое требование. Надеюсь, что это поможет кому-то еще.

Answer 2

Получаете ли вы ответ на запрос автозаполнения со стороны сервера или со стороны клиента?

Если ответ получен со стороны сервера, добавление нового «яблока» будет автоматически обновлено.Что касается события javascript, запускающего новое диалоговое окно, вы можете использовать событие наблюдателя изменения Jquery.

Примерно так:

$("#autocomplete-list").live("change",function(){
  if($(this).val() == "Create New Apple"){
      //add function to create dialogue
  }
});

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

Но для динамического обновления ответа автозаполнения, чтобы включить в него только что созданное «яблоко», вам придется заменить переменную javascript, содержащую все яблоки.

Это можно сделать, вызвавприложение rails всякий раз, когда вы создаете новое «яблоко», которое заменяет элемент DOM, в котором находится переменная.Таким образом, новое созданное «яблоко» будет включено в список автозаполнения.

Надеюсь, это имеет смысл