CODEWITHSUNDEEP
ajaxautocompleteprototypejsscriptaculous
Yako
Yako

Reputation: 3484

scriptaculous ajax autocomplete empty response

I’m working with the ajax-autocompleter which works great. My aim is to redirect between an editing function for an existing item, or a creating function for a not-found item.

I insert a specific id to each li, and I can therefore use it for the editing function with an afterUpdateElement option.

But if no results are found, the list is empty, and I can’t find any way to tell the afterUpdateElement script that no results were found. Indeed, no afterUpdateElement is called, since there is no selection. So afterUpdateElement is useless…

I was thinking about testing the full value sent by the ajax request. But I didn’t find how to grab it…

Upvotes: 3

Views: 2730

Answers (2)

andi
andi

Reputation: 14458

You can try to overwrite the updateChoices method like so:

Ajax.Autocompleter.prototype.updateChoices =  function (choices) {
if(!this.changed && this.hasFocus) {

      if(!choices) {
        //do your "new item" thing here
      }
      else {
         this.update.innerHTML = choices;
         Element.cleanWhitespace(this.update);
         Element.cleanWhitespace(this.update.down());

         if(this.update.firstChild && this.update.down().childNodes) {
           this.entryCount =
             this.update.down().childNodes.length;
           for (var i = 0; i < this.entryCount; i++) {
             var entry = this.getEntry(i);
             entry.autocompleteIndex = i;
             this.addObservers(entry);
           }
         } else {
           this.entryCount = 0;
         }

         this.stopIndicator();
         this.index = 0;

         if(this.entryCount==1 && this.options.autoSelect) {
           this.selectEntry();
           this.hide();
         } else {
           this.render();
         }
      }
   }
}

It's not a good ideea to overwrite in controls.js. Instead you can add this to a new .js and include it after the library.

EDIT: pff.. sorry about the bad indents, but it's copy/paste from TextMate and is has tabs combined with spaces. I hope you get the point though. The only thing I added was the

      if(!choices) {
        //do your "new item" thing here
      }
      else {}

block. Also, I didn't test the code, but I think it should work.

Upvotes: 1

Yako
Yako

Reputation: 3484

So, I finally found a way to check if results were selected or not (with the huge help of Gwyohm) :

  1. First of all, we set up an hidden field which will record if a result was selected (true/false). By default, it is set to FALSE.
  2. The afterUpdateElement is only used after a selection. So we use this aferUpdateElement to turn our hidden field to TRUE.

  3. If the user changes the search field value, for a brand new value not selected, no afterUpdateElement is used, and our hidden value is still set to TRUE. The solution to that problem is to listen to a key pressed. If a key is pressed, then the hidden field turns back to FALSE. This works for all keys, even the Enter key actually used to make a selection. So this is an exception we should remove from our keypress listener. So, finally let's have a look to our extra function :

    $(id-of-text-field).observe("keyup", function(e) {

    if (window.event) keycode = window.event.keyCode;
    else if (e) keycode = e.which;
    if (keycode!=13) {

    $(id-of-hidden-field).value="FALSE";

    }

    }.bindAsEventListener($(id-of-text-field)));

We can then use the hidden field to know if the text value should be edited or created...

Beware : with this solution, if the user types a value matching an existing value, without selecting it, it will be considered as a new value, and will lead to a duplicate entry if you add this value to your database. (but this was ok for me, as I was working with names, and two different people may have the same name...)

Upvotes: 1

Related Questions