jquery: Autovervollständigungsfelder vorausfüllen

Question

Ich verwende das Tokenizing Autocomplete Plugin für Jquery ( http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry ). Ich benutze meist Ruby, und ich bin wirklich nicht vertraut mit javascript, obwohl.

Meine Grundeinstellung sieht wie folgt aus und funktioniert gut für ein neues, leeres Formular:

$(document).ready(function () {
  $("#tag_ids_field").tokenInput("/tags", {
    queryParam: "search"
  });
});

Das Problem tritt auf, wenn ich versuche, die Seite vorzufüllen, z. B. für eine Bearbeitungsseite. Ich versuche, so etwas zu tun (wo die "#tag_ids_field" Textfeld enthält die JSON, wenn die Seite geladen wird - so ist nur sauberer auf der Anwendungsseite der Dinge).

$(document).ready(function () {
  var tags = $("#tag_ids_field").html();
  $("#tag_ids_field").tokenInput("/tags", {
    queryParam: "search",
    prePopulate: tags
  });
});

Wenn die Seite jedoch geladen wird, sehe ich, dass sie nur mit Hunderten von Einträgen gefüllt ist, die "undefiniert" lauten. Ich erhalte dies auch, wenn ich die JSON-Ausgabe, die Rails zur Verfügung stellt, nehme und versuche, sie direkt in die .js-Datei zu stecken:

$(document).ready(function () {
  $("#tag_ids_field").tokenInput("/tags", {
    queryParam: "search",
    prePopulate: "[{\"id\":\"44\",\"name\":\"omnis sit impedit et numquam voluptas enim\"},{\"id\":\"515\",\"name\":\"deserunt odit id doloremque reiciendis aliquid qui vel\"},{\"id\":\"943\",\"name\":\"exercitationem numquam possimus quasi iste nisi illum\"}]"
  });
});

Das ist natürlich keine Lösung, ich habe es nur aus Frustration ausprobiert, und ich erhalte das gleiche Verhalten.

Meine zwei Fragen:

Erstens, warum werden meine Textfelder mit "undefinierten" Tags gefüllt, wenn ich versuche, sie vorzubefüllen, und wie kann ich sie dazu bringen, sie erfolgreich vorzubefüllen?

Zweitens plane ich, viele solcher Autovervollständigungsfelder auf einer Seite zu haben (wenn mehrere Datensätze auf einmal bearbeitet werden - sie fragen alle denselben Ort ab). Wie kann ich jedes Autocomplete-Feld nehmen es ist vorgefüllte Werte aus es ist eigenes Textfeld? So etwas wie (Anwendung dieser Einstellungen auf alle Eingabefelder mit einer bestimmten Klasse, nicht nur auf das mit einer bestimmten ID):

$(document).ready(function () {
  $(".tag_ids_field").tokenInput("/tags", {
    queryParam: "search",
    prePopulate: (the contents of that particular ".tag_ids_field" input box)
  });
});

Flash84x: Ich bin mir nicht sicher, worauf Sie hinauswollen. tag_ids_field ist kein DB-Feld - es ist ein virtuelles Attribut, das ich im Modell definiert habe. Der Setter (der eine Liste von kommaseparierten IDs akzeptiert) definiert die Beziehung des Datensatzes zu diesen Tags in der Datenbank. Der Getter (der den Textbereich füllt, wenn die Seite geladen wird) kann zurückgeben, was immer ich will - im Moment habe ich ihn so eingestellt, dass er nur die aktuellen Tag-Daten in JSON zurückgibt, weil so alles übersichtlicher ist.

Wenn Sie möchten, kann ich Ihnen das genauer erklären, aber die Ruby-Seite funktioniert gut und ich bin damit vertraut. Ich weiß nur nicht wirklich Javascript überhaupt, so brauche ich Hilfe bei der Manipulation der Daten, sobald es Client-Seite bekommt.

Answer 1

Macht nichts, ich habe es herausgefunden:

$(document).ready(function () {
  $(".tag_ids_field").each(function(index) {
    var ids = eval($(this).html());
    $(this).html('');

    $(this).tokenInput("/tags", {
      queryParam: "search",
      prePopulate: ids
    })
  });
});

Answer 2

Ich würde denken, es wäre sinnvoller für den Controller, um die Daten an die Ansicht bearbeiten und füllen Sie die Felder über Ruby, indem Sie das Wert-Attribut auf die Eingabe-Elemente bereitstellen. Auch wenn Sie ajaxing in den bearbeiten Formen sind, können Sie den Controller die Daten an die Ansicht übergeben haben. Es sei denn, Sie tun etwas, wo die Daten nicht in der Datenbank gespeichert werden...

Vielleicht sollten Sie mehr darüber erfahren, warum Sie es auf diese Weise machen wollen.