Jquery auto-complete for rails

Question

I need to use autocomplete in a rails application. Which uses combobox as a source. I used jquery and combobox autocomplete.

But I need an extra feature. Suppose we print "Apple" and it is not available in autocomplete search, it shows a new item in the "Create a new apple" list, if we select it, it fires a JavaScript event. so that we can open a dialog to add it.

In addition, autocomplete can also be updated after rendering. If you add a new entry, it can also be filled in the list.

Hope to get good things from you guys.

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 "change" observer.

- :

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

, , , .

"" javascript, .

, rails , "", DOM, . , "" .

,