jquery Autcomplete Wie kann ich das RenderMenu immer anzeigen, unabhängig davon, ob es Quelltreffer gibt?

Question

Ich möchte ein Helfer meiner jQuery Autocomplete wie folgt hinzufügen:

var thing = $("#thing").autocomplete({ 
     minLength: 0, 
     source: myarray 
    }) 

    // Override the Render Menu 
    thing.data("autocomplete")._renderMenu= function(ul, items) { 
     var self = this; 
     $.each(items, function(index, item) { 
      self._renderItem(ul, item); 
     }); 
     // Adder 
     ul.append("<a class='helper'>Add <b>\"" + this.term + "\"</b> as a new item</a>") 
    } 

Das Problem ist dieses HELFER zeigt nur auf, wenn die zur automatischen Vervollständigung mindestens 1 Suchspiel gegen die myarray hat. Wie kann ich das Menü immer anzeigen lassen, wenn der Benutzer fokussiert ist?

Dank

Answer 1

denke ich, ein wenig mehr Affe-Patchen in Ordnung ist:

/* Override the _response function to always open the suggestions menu: */ 
thing.data("autocomplete")._response = function(content) {   
    if (!this.options.disabled) { 
     this._trigger("open"); 
     content = this._normalize(content); 
     this._suggest(content); 
    } 

    this.pending--; 
    if (!this.pending) { 
     this.element.removeClass("ui-autocomplete-loading"); 
    } 
}; 

Beispiel:http://jsfiddle.net/eJMuf/

Dies sollte funktionieren, aber ich werde für ein suchen weiter Lösung mit der Standard-API.

---

Hier ist eine andere Lösung, die nicht ganz so viel Operation am offenen Herzen erfordert, aber es mehr Code erfordert:

var thing = $("#thing").autocomplete({ 
    minLength: 0, 
    /* Use a source function instead of the array */ 
    source: function(request, response) { 
     var result = myArray.slice(0); 
     /* Filter the array normally... */ 
     result = $.ui.autocomplete.filter(result, request.term); 

     /* Add a placeholder result that we can process later */ 
     result.push({ 
      value: request.term, 
      isPlaceholder: true 
     }); 
     response(result); 

    } 
}).focus(function() { 
    $(this).autocomplete("search", this.value); 
}); 

var renderItem = thing.data("autocomplete")._renderItem; 
/* Override the _renderItem function to display the placeholder item */ 
thing.data("autocomplete")._renderItem = function(ul, item) { 
    if (item.isPlaceholder) { 
     return $("<li>") 
      .data("item.autocomplete", item) 
      .append("<a class='helper'>Add <b>\"" + item.value + "\"</b> as a new item</a>") 
      .appendTo(ul); 

    } else { 
     renderItem(ul, item); 
    } 
}; 

Beispiel:http://jsfiddle.net/FvCY6/

ich persönlich gehen würde mit Diese Lösung ist weniger invasiv.

Answer 2

Besserer Ansatz wäre, ein Element über die Anzahl der Elemente aus Back-End hinzuzufügen.
Wenn es ein JSON-Array ist, dann fügen Sie ein JSON-Objekt mit einem Label und einem speziellen Wert von -1 hinzu. In diesem Fall wird das Array immer ein Objekt enthalten. :)