Trying to get tag-it to work with an AJAX call

Question

Trying to get tag-it to work with an ajax call.

Everything works so far. Except, I am unable to assign a tagSource via an ajax call.

In firebug, the 'data' is returning:

["Ruby","Ruby On Rails"]

But its not showing up as I type into the input box.

$('.tags ul').tagit({
  itemName: 'question',
  fieldName: 'tags',
  removeConfirmation: true,
  availableTags: ["c++", "java", "php", "javascript", "ruby", "python", "c"],
  allowSpaces: true,
  // tagSource: ['foo', 'bar']
  tagSource: function() {
    $.ajax({
      url:        "/autocomplete_tags.json",
      dataType:   "json",
      data:       { term: 'ruby' },
      success:    function(data) {
        console.log(data);
        return data;
      }
    });
  }
});

console.log(data) returns ["Ruby", "Ruby On Rails"].

Am I missing something here? Anyone else got this to work?

Galahad

you should put "return data;" not "eturn"; – Steric

It was a typo. Should be "return" – Galahad

@ChristianFazzini tagSource doesn't figure in the list of parameters of tag-it? github.com/aehlke/tag-it/blob/master/README.markdown. Can you explain to me please? – Predigest

Answer 1

Seems this question hasn't been answered for a long time, I bet you have already found a solution but for those who haven't here is my answer:

The indention got all messed up when i copied from my code ;)

<input type="hidden" name="tags" id="mySingleField" value="Apple, Orange" disabled="true">
Tags:<br>
<ul id="mytags"></ul>

<script type="text/javascript">
    jQuery(document).ready(function() {
    jQuery("#mytags").tagit({
        singleField: true,
        singleFieldNode: $('#mySingleField'),
        allowSpaces: true,
        minLength: 2,
        removeConfirmation: true,
        tagSource: function( request, response ) {
            //console.log("1");
            $.ajax({
                url: "search.php", 
                data: { term:request.term },
                dataType: "json",
                success: function( data ) {
                    response( $.map( data, function( item ) {
                        return {
                            label: item.label+" ("+ item.id +")",
                            value: item.value
                        }
                    }));
                }
            });
        }});
    });

and the "search.php" you can find this in some autocomplete jQuery examples actually.

<?php
$q = strtolower($_GET["term"]);
if (!$q) return;

$items = array(
    "Great Bittern"=>"Botaurus stellaris",
    "Little Grebe"=>"Tachybaptus ruficollis",
    "Black-necked Grebe"=>"Podiceps nigricollis",
    "Little Bittern"=>"Ixobrychus minutus",
    "Black-crowned Night Heron"=>"Nycticorax nycticorax",
    "Heuglin's Gull"=>"Larus heuglini"
);

function array_to_json( $array ){

    if( !is_array( $array ) ){
        return false;
    }

    $associative = count( array_diff( array_keys($array), array_keys( array_keys( $array )) ));
    if( $associative ){

        $construct = array();
        foreach( $array as $key => $value ){

        // We first copy each key/value pair into a staging array,
        // formatting each key and value properly as we go.

        // Format the key:
        if( is_numeric($key) ){
            $key = "key_$key";
        }
        $key = "\"".addslashes($key)."\"";

        // Format the value:
        if( is_array( $value )){
            $value = array_to_json( $value );
        } else if( !is_numeric( $value ) || is_string( $value ) ){
            $value = "\"".addslashes($value)."\"";
        }

        // Add to staging array:
        $construct[] = "$key: $value";
    }

    // Then we collapse the staging array into the JSON form:
    $result = "{ " . implode( ", ", $construct ) . " }";

} else { // If the array is a vector (not associative):

    $construct = array();
    foreach( $array as $value ){

        // Format the value:
        if( is_array( $value )){
            $value = array_to_json( $value );
        } else if( !is_numeric( $value ) || is_string( $value ) ){
            $value = "'".addslashes($value)."'";
        }

        // Add to staging array:
        $construct[] = $value;
    }

    // Then we collapse the staging array into the JSON form:
    $result = "[ " . implode( ", ", $construct ) . " ]";
}

return $result;
}

$result = array();
foreach ($items as $key=>$value) {
    if (strpos(strtolower($key), $q) !== false) {
    array_push($result, array("id"=>$value, "label"=>$key, "value" => strip_tags($key)));
}
if (count($result) > 11)
    break;
}
echo array_to_json($result);

?>

Klockau

The key as shown in this answer is wrapping the tagit function in a jQuery document.ready function. – Kamp

How can we show label in tags and set value in hidden field – Pansy

Answer 2

check this out: How to get tagSource to work with $.ajax()? (from tag-it's github issue list).

this is an example: HTML file:

<!doctype html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/tag-it.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<link href="css/jquery.tagit.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
$(document).ready(function() {
$("#mytags").tagit({
  tagSource: function(search, showChoices) {
    $.ajax({
      url: "auto.php",
      data: {search: search.term},
      success: function(choices) {
        showChoices(choices);
      }
    });
  }
});
});
</script>
</head>
<body>
<ul id="mytags">
<li>Tag1</li>
</ul>
</body>
</html>

(get tag-it.js file from [here][1])

and this is the PHP file:

<?php
header('Content-type: application/json');
$q = $_GET["search"];
//check $q, get results from your database and put them in $arr
$arr[] = 'tag1';
$arr[] = 'tag2';
$arr[] = $q;
echo json_encode($arr);
?>

Thesaurus

Answer 3

None of these answers worked as is for me, so I thought I would come back and post my code that does work.

var tagThis = $(".tagit");
tagThis.tagit({
    tagSource: function(search, showChoices) {
        $.ajax({
            url: "/tags/search",
            data: { search: search.term },
            dataType: "json",
            success: function(data) {
                var assigned = tagThis.tagit("assignedTags");
                var filtered = [];
                for (var i = 0; i < data.length; i++) {
                    if ($.inArray(data[i], assigned) == -1) {
                        filtered.push(data[i]);
                    }
                }
                showChoices(filtered);
            }
        });
    }
});

This code assumes the URL returns a JSON encoded string (an array of strings). It will then filter out any tags that have already been selected in the input. So they aren't repeated in the list. Otherwise, this works for me.

Thanks to the others for sending me on the right path.

Mavismavra

where did your tagThis.tagit("assignedTags"); ? – Magnetometer

var assigned = tagThis.tagit("assignedTags"); reads the current list of tags in the field to the variable assigned as an array of strings. – Mavismavra

Please, What you mean by assignedTags? do you mean id of singleFieldNode – Seguidilla

And the php page? – Looker

Answer 4

tagSource has been depreciated.

Just use:

<script>
  $(document).ready(function(){
      $("#tagit").tagit({
     autocomplete: {
    source: "your-php-file.php",
     }
   });
  });
</script>

You can add all the attributes to this:

<script>
  $(document).ready(function(){
      $("#tagit").tagit({
         allowSpaces: true,
         singleFieldDelimiter: ';',
         allowDuplicates: true,
         autocomplete: {
           source: "your-php-file.php",
     }
   });
  });
</script>

Hardner

Using your snippet, show all the returned JSON tags. Even if I specify one. Any solution? – Demolition

Depends on your query on the other side. – Hardner

Answer 5

You should remove your availableTags, as you are overloading tagSource, which is used as source for the autocompletion.

Also that may be a typo, but it "return", and not "eturn".

Edit:

I think the problem is that the function you provided to tagSource doesn't seems to return anything. However my javascript knowledge seems to end here :/

Mill

Removing availableTags doesnt solve anything. Still the same problem – Galahad

It returns: ["Ruby", "Ruby On Rails"] – Galahad

Answer 6

I think that you can overwrite the autocomplete method from jquery UI :

$('.tags ul').tagit({

    itemName: 'question',
    fieldName: 'tags',
    removeConfirmation: true,
    //availableTags: ["c++", "java", "php", "javascript", "ruby", "python", "c"]
    allowSpaces: true,
    // tagSource: ['foo', 'bar']
    tagSource: function () {
        $.ajax({
            url: "/autocomplete_tags.json",
            dataType: "json",
            data: {
                term: 'ruby'
            },
            success: function (data) {
                console.log(data);
                return data;
            }

        });
    },
    autocomplete: {
        delay: 0,
        minLength: 2,
        source: this.tagSource()
    }
});

Casuistry

source: this.tagSource(), are you sure? I am following your approach, I see the encoded json in my console but it is not passed to autocomplete.source – Predigest

try to verify your this object ;) – Casuistry

Answer 7

Just to add

Assuming your script page looks like

<script>
  $(document).ready(function(){
      $("#myULTags").tagit({
         allowSpaces: true,
         singleFieldDelimiter: ';',
         allowDuplicates: true,
         autocomplete: {
           source: "searchtag.php",
     }
   });
  });
</script>  

Your simple php page if you are fetching values from database would look like

<?php $link = mysqli_connect("localhost","root","dbpassword","dbname") or die("Couldn't make connection."); ?>

<?php
$q = strtolower($_GET["term"]);
if (!$q) return;

header('Content-type: application/json');


$query_tags = mysqli_query($link,"SELECT TagName FROM `tagstable` WHERE `TagName` LIKE '%".$q."%' LIMIT 10");

$items = array(); // create a variable to hold the information
while ($row = mysqli_fetch_array($query_tags)){ 

  $items[] = $row['TagName']; // add the row in to the results (data) array

}

echo json_encode($items);

?>

Regards

Looker