Prepopulate Werte in Token Eingabe Textfeld aus Datenbank mit PHP

Question

Unten ist mein Code Zum Hinzufügen von Auswahlmöglichkeiten im Text als Tag mit tokeneinput.After Auswahl von Tags, während Speichern-Taste ich werde die Auswahl als Array und speichern Sie es in der Datenbank als USA, Irland in country.Nach dem Speichern möchten Sie Daten als Tag mit jquery-Methode vorbelegen. Nachfolgend finden Sie einen Referenzcode für diesen Prozess.

 <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"/> 
     <link rel="stylesheet" href="styles/token-input.css" type="text/css" /> 
     <script type="text/javascript" src="src/jquery.tokeninput.js"></script> 
<script> 
     var country_list=[ 
{id: 1, name: "UK"}, 
{id: 2, name: "CANADA"}, 
{id: 3, name: "IRELAND"}, 
{id: 4, name: "SINGAPORE"}, 
{id: 5, name: "AUSTRALIA"}, 
{id: 6, name: "NEWZEALAND"}, 
{id: 7, name: "SWITZERLAND"}, 
{id: 8, name: "CYPRUS"}, 
{id: 9, name: "FRANCE"}, 
{id: 10, name: "MALAYSIA"}, 
{id: 11, name: "ITALY"}, 
{id: 12, name: "SWEDEN"}, 
{id: 13, name: "GERMANY"}, 
{id: 14, name: "USA"}, 
{id: 15, name: "DUBAI"}, 
{id: 16, name: "SPAIN"}, 
{id: 17, name: "LITHUANIA"}, 
{id: 18, name: "NETHERLANDS"}, 
{id: 19, name: "LATVIA"}, 
{id: 20, name: "SOUTH AFRICA"}, 
{id: 21, name: "OTHERS"} 
]; 
var selected_countries=<?php echo json_encode(explode(",",$country));?>; 
//alert(selected_countries); 
var populate_list=[]; 
var index; 
for (index = 0; index < country_list.length; ++index) { 
console.log(country_list[index]); 
if(selected_countries.indexOf(country_list[index].name)>-1){ 

populate_list.push(country_list[index]); 
} 
} 
var prepopulate = { 
prePopulate : populate_list 
}; 

$("#country").tokenInput(country_list,prepopulate); 
</script> 

HTML-Code

<input type="text" name="country" id="country"> 

Und Für Ergebnis alle ausgewählten Text in Datenbank gespeichert i

verwendet

AJAX Code

var arr1 = $('#country').tokenInput("get"); 
      var names1 = []; 
      $.each(arr1, function(i, obj) 
      { 
      names1.push(obj.name); 
      }); 
      var country=names1.join(); 

und Ergebnis-Datenbank Seite und UI Side

Answer 1

Von http://loopj.com/jquery-tokeninput/

vorab ausgefüllt vorab auszufüllen die tokeninput mit vorhandenen Daten. Stellen Sie ein Array von JSON-Objekten ein, z. B .: [{id: 3, name: "test"}, {id: 5, name: "awesome"}] um die Eingabe vorab zu füllen.

var country_list=[ 
{id: 1, name: "UK"}, 
{id: 2, name: "CANADA"}, 
{id: 3, name: "IRELAND"}, 
{id: 4, name: "SINGAPORE"}, 
{id: 5, name: "AUSTRALIA"}, 
{id: 6, name: "NEWZEALAND"}, 
{id: 7, name: "SWITZERLAND"}, 
{id: 8, name: "CYPRUS"}, 
{id: 9, name: "FRANCE"}, 
{id: 10, name: "MALAYSIA"}, 
{id: 11, name: "ITALY"}, 
{id: 12, name: "SWEDEN"}, 
{id: 13, name: "GERMANY"}, 
{id: 14, name: "USA"}, 
{id: 15, name: "DUBAI"}, 
{id: 16, name: "SPAIN"}, 
{id: 17, name: "LITHUANIA"}, 
{id: 18, name: "NETHERLANDS"}, 
{id: 19, name: "LATVIA"}, 
{id: 20, name: "SOUTH AFRICA"}, 
{id: 21, name: "OTHERS"} 
]; 

var selected_countries=<?php echo json_encode(explode($country));?>; 
var populate_list=[]; 
var index; 
for (index = 0; index < country_list.length; ++index) { 

if(selected_countries.indexOf(country_list[index].name)>-1){ 
populate_list.push(country_list[index]); 
} 
} 
var prepopulate = { 
prepopulate : populate_list 
}; 

$("#country").tokenInput(country_list,prepopulate); 

Answer 2

Ändern Sie Ihre Eingabe Textfeld folgende:

<input type="text" name="country" id="country" value='<?php echo $country; ?>' data-country='<?php echo $country; ?>'> 

Dann fügen Sie vorab ausgefüllt Parameter wie folgt vor:

prePopulate: $('#country').data('country')