En utilisant jQuery tag-it pour retourner 2 variables dans 2 champs différents avec php, mysqli, json

Question

Probablement la pire question, mais je ne sais pas comment l'exprimer autrement.

Fondamentalement, j'ai implémenté le jQuery tag-it dans mon code. Cependant, j'utilise une solution d'un autre utilisateur, qui fonctionne dans la mesure où elle récupère les données que je veux récupérer et les transfère dans l'entrée dont j'ai besoin.

La solution que j'ai est donc:

jQuery:

$(document).ready(function(){ 
var availableTags = <?php include("ajax-search.php"); $english = search();?>; 
$("#livesearch").tagit({ 
    autocomplete: { 
     source: availableTags 
    } 
}); 
}); 

PHP/MySQLi:

function search() { 
include("dbconnect.php"); //Including our DB Connection file 
$sql = "SELECT * FROM animals"; 
$query = mysqli_query($db, $sql); 

while ($result = mysqli_fetch_assoc($query)){ 
    $english[] = $result['eng_names']; 
} 
echo json_encode($english); 
} 

Essentiellement, je veux revenir 3 variables. Anglais, latin et statut.

Ainsi, la prémisse est la suivante:

Status = English == Latin 

Ainsi, le statut je Disparue, en voie de disparition, Disparue dans la nature, etc. Cependant, certains animaux ne sont pas dans l'une de ces listes. Ces animaux peuvent être communs et n'ont donc pas besoin d'une étiquette spéciale, mais ils doivent tous avoir leur nom latin. Le but est que si un utilisateur tape 'Éteint', une liste de tous les animaux morts apparaîtra.

Pourquoi utiliser des balises? Eh bien, parce que ce sont des rapports. L'utilisateur va écrire un rapport et marquer les animaux qui y sont impliqués. Le nom des animaux (latin et anglais) doit être retourné, mais pas le statut. Je pense que je comprends comment json peut faire cela. Ajoutez-les simplement. Si le champ n'a pas de texte dans la colonne d'état, ignorez-le. Cependant, je ne sais pas comment le renvoyer de la recherche mysqli. Je pense que la méthode est .map(), mais chaque fois que je l'utilise .map() les pauses de la fonction de recherche (comme dans ce liste de toutes les créatures, mais si vous tapez n'entonnoir pas la recherche

EDIT:. .

Joy Alors, je suis parvenu à comprendre comment faire correspondre les deux paramètres que j'étais confus au sujet

Je l'ai fait en modifiant la jQuery originale.

<script> 
$(document).ready(function(){ 
$("#livesearch").tagit({ 
    autocomplete: { 
     source: 'ajax-search.php', 
     minLength:1 
    } 
    }); 
    }); 
</script> 

Puis dans le code HTML j'ajouté une méthode de publication:

<form method="post"> 
    <input name="tags" id="latin" size="100%" disabled="true"> 
    <ul id="livesearch"></ul> 
    <input type="submit" value="Submit" />     
</form> 

Mais la recherche tous a lieu sur la requête PHP/MySQLi:

if (!isset($_REQUEST['term'])) 
exit; 

$keyword = trim($_REQUEST['term']); 
$keyword = mysqli_real_escape_string($db, $keyword); 
$query = "SELECT * FROM animals WHERE english LIKE '%$keyword%' OR status LIKE '%$keyword%'";  
$result = mysqli_query($db, $query); //Run the Query 
$data = array(); 

if ($result && mysqli_num_rows($result)){ 
    while($row = mysqli_fetch_assoc($result)){ 
    $data[] = array(
    'label' => $row['english'], 
    'value' => $row['english'], 
    'latin' => $row['latin'] 
    ); 
    } 
} 
echo json_encode($data); 
flush(); 

Donc, si je cherche le statut (disparue, en voie de disparition, etc.), elle retourne les animaux corrects.

J'ai eu l'idée/code de these guys. Je suis maintenant coincé sur la partie où j'ai besoin de montrer le latin et l'anglais dans deux domaines différents, mais je pense que cela doit faire quelque chose avec la source tag-it.js. Je vais mettre à jour si je le découvre.

EDIT 2:

D'accord, je réussi à le faire travailler avec mettre deux résultats différents dans deux champs de texte différents. Mais il ne ferme pas l'entrée dans une balise.

Voici le jQuery modifié:

$("#livesearch").tagit({ 
    autocomplete: { 
     source: "ajax-search.php", 
     select: function(evt, ui){ 
      this.form.latin.value = ui.item.latin; 
     } 
    } 
}); 

Il travaille en ce qu'elle met le latin dans l'entrée de texte latin. Mais il n'emballe pas l'entrée dans une petite balise soignée comme avant.

Edit 3

Je suis allé aussi loin que je pouvais, mais de ne pas profiter.

Essentiellement, j'ai ajouté l'appel variable dans la balise-it.js elle-même en étendant le champ de saisie semi-automatique en tant que tel:

// Autocomplete. 
    if (this.options.availableTags || this.options.tagSource || this.options.autocomplete.source) { 
     var autocompleteOptions = { 
      select: function(event, ui) { 
       that.createTag(ui.item.value); 
       that.createTag(ui.item.latin); //custon input? 
       // Preventing the tag input to be updated with the chosen value. 
       return false; 
      } 
     }; 
     $.extend(autocompleteOptions, this.options.autocomplete); 

Tout ce qui fait, cependant, est d'ajouter les noms anglais réguliers du animaux et les noms latins des animaux en même temps. Je peux ensuite supprimer les noms anglais après, mais c'est trop long.

J'ai essayé d'utiliser le this.form.latin.value = ui.item.latin; qui semble fonctionner, mais si j'ajoute un certain nombre de balises ou si j'en supprime un, le code entier se brise. Il semble que ce soit une chose à sens unique, donc ce n'est pas une bonne solution.

Answer 1

Décidé de rendre l'autre entrée modifiable. Ce n'est pas une solution optimale, mais il faudra le faire pour le moment. Je vais mettre à jour ceci et le transformer en un Wiki pour les autres qui ont besoin de fonctions similaires pour leurs codes Tag-It.