Using jQuery tag-it to return 2 variables into 2 different fields with php, mysqli, json

Question

Probably the worst question, but I don't know how else to phrase it.

Basically I've implemented the jQuery tag-it into my code. However, I'm using a solution from another user, that works insofar as it pulls the data I want back and dumps it into the input I need.

The solution I've got is thus:

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);
}

Essentially I want to return 3 variables. English, Latin, and status.

So, the premise is this:

Status = English == Latin

So, in status I have Extinct, Endangered, Extinct in the wild, etc. However some animals are not in any of these lists. These animals may be common and therefore don't need a special label, but they all need to have their Latin name.

The purpose is if a user types in 'Extinct' a list of all animals that are dead will appear.

Why use Tags? Well, because they are reports. The user will write a report and tag any animals that are involved in them. The name of the animals (Latin and English) need to be returned, but not the status.

I think I understand how json can do this. Just add them in. If the field has no text in the status column, then ignore it. However, I don't know how to return it from the mysqli search. I think the method is .map() but whenever I use .map() the search function breaks (as in it lists all the creatures, but if you type it doesn't funnel the search.

EDIT:

Joy. So, I managed to figure out how to match the two parameters I was confused about.

I did this by modifying the original jQuery:

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

Then in the HTML I added a post method:

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

But the search all takes place on the PHP/MySQLi query:

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();

So, if I search for the status (extinct, endangered, etc) it returns the correct animals.

I got the idea/code from these guys.

So I'm now stuck on the part where I need to show the Latin and the English in two different fields, but I figure that has to do something with fiddling the tag-it.js source. I will update should I figure it out.

EDIT 2:

Okay, I managed to get it to work with putting two different results into two different text fields. But it doesn't close the input into a tag.

Here's the modified jQuery:

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

It works in that it puts the Latin in the Latin text input. But it now doesn't wrap the input into a neat little tag like it did before.

Edit 3

I've gone as far as I could, but to not avail.

Essentially I've added the variable call in the tag-it.js itself by extending the autocomplete field as such:

    // 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);

All that does, however, is add both the regular English names of the animals and the Latin names of the animals at the same time. I can then delete the English names afterwards, but that's too long winded.

I've tried to use the this.form.latin.value = ui.item.latin; which seems to work, but if I add a number of tags or if I delete one the entire code breaks. It seems it's a one-way thing, so that's not a great solution.

Answer 1

Decided to make the other input editable. It's not an optimal solution, but it will have to do for the time being. I'll update this and turn it into a Wiki for others who need similar functions for their Tag-It codes.