Question

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

But i need an extra feature. Suppose we type “Apple” and it is not available in auto-complete search it shows a new item in the list named “Create New Apple”, if we select it triggers a JavaScript event. so that we can open some dialog to add it.

Moreover the autocomplete can also be updated after rendering. Means if we add new record, it can also be populated in the list.

Hope to get good stuff from you guys.

Answer 1

I full filled my scenario with this code. I modified the code from the jquery site, refactor the change event to.

 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;
      }
  }
}

and in the source function

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
                        };
                    }
                }));
            };

This fulfilled my requirement. Hope will be help full for some one else.