jquery autocomplete for rails application

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 l开发者_如何学Cist 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.

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.

Are you getting the response for the autocomplete query from the server side or the client side?

If the response is from the server side, adding a new "apple" would automatically be updated. As for the javascript event to trigger a new dialog, you can use the Jquery "change" observer event.

Something like this:

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

Now if your autocomplete response is from the client side, you can use the above callback to trigger the dialog creation.

But to dynamically update the autocomplete response to include the new created "apple", you will have to replace the javascript variable holding all the apples.

You can do this by making a call to the rails app whenever you create a new "apple", which replaces the DOM element where the variable is located. That way the new "apple" created would be included in the autocomplete list.

Hope this makes sense