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.
