2016-04-26 5 views
1

Ich verwende Tag-It, jQuery Auto-Complete und jQuery Ajax in einem alten (ziemlich großen) asp.net web-forms Projekt.jQuery Tag-It - Wie Autocomplete-Liste automatisch angezeigt wird, wenn Tag ausgewählt ist

Alles funktioniert perfekt, aber noch eine Sache muss erledigt sein, bevor ich mein Ziel erreicht habe. Sobald ein Tag (Wort oder Wörter) aus dem Autocomplete-Dropdown ausgewählt ist, möchte ich eine Autocomplete-Liste mit Vorschlägen für das nächste Tag (wieder Wort oder Wörter) anzeigen. (Die manuelle Eingabe eines Prozentzeichens gibt mir das Verhalten, das ich möchte, aber meine Benutzer wären mit dieser Lösung nicht zufrieden.)

Ich habe ohne Erfolg gesucht und alle meine bisherigen Versuche sind fehlgeschlagen. Der Code, den ich verwende, ist unten angegeben. Ich habe versucht, viele verschiedene Sachen in die afterTagAdded-Methode zu setzen. Der aktuelle Versuch gibt mir eine “Object expected” Ausnahme in jquery-ui 1.11.4.

Am dankbar, wenn mir jemand in die richtige Richtung zeigen kann. Ich bin kein Experte für Javascript noch jQuery.

$(document).ready(function() { 
     var currentlyValidTags = []; 

     $(".TagItInput").tagit({ 
      autocomplete: { 
       source: function (request, response) { 
        $.ajax({ 
         type: "POST", 
         url: "AutoCAdvTest3.aspx/GetTexts", 
         data: JSON.stringify({ text: request.term, tags: $(".TagItInput").tagit("assignedTags") }), 
         contentType: "application/json; charset=utf-8", 
         dataType: "json", 
         success: function (msg) { 
          currentlyValidTags = msg.d; 
          response(msg.d); 
         } 
        }); 
       }, 
       minLength: 0 
      }, 
      beforeTagAdded: function (event, ui) { 
       // Only allow tags from the completion list 
       if ($.inArray(ui.tagLabel, currentlyValidTags) == -1) { 
        return false; 
       } 
      }, 
      afterTagAdded: function (event, ui) { 
       // without this line I get an error saying that AutoComplete is not initialized 
       $(".TagItInput").autocomplete(); 
       // but.... Search method fails anyway 
       $(".TagItInput").autocomplete("search", "%"); 
      }, 
     }); 

     $(".ui-autocomplete-input").focus(); 
    }); 

Antwort

0

ich es geschafft, eine Lösung zu finden, aber nicht sicher, ob es der richtige Ansatz und nehmen zum Glück keine Kommentare darauf.

Wenn Sie die Leertaste auf der Tastatur manuell drücken, wird nach Tags gesucht und die Abschlussliste angezeigt.

Im dem Tag-ItafterTagAdded Ereignisse I jQuery bin mit einem Leertastendruck-Ereignis in dem Eingabefeld von Tag-It erstellt zu senden. Scheint den Trick zu machen, zumindest für späte Versionen von IE und Chrome.

  afterTagAdded: function (event, ui) { 
       var e = $.Event("keydown", { keyCode: 32 }); 
       $(".ui-autocomplete-input").trigger(e); 
      }, 
Verwandte Themen