Geek Answers Handbook

Change jquery tag behavior - it is based on autocomplete library to use ajax JSON sources

I am trying to add some features to the jQuery tag-it plugin based on autocomplete:

a) I am trying to filter JSON data to display only the tag name.

JSON sample returned by /repo/json :

 [{id:1, name:"0.8-alpha-1", category:"version"}, {id:2, name:"0.8-alpha-2", category:"version"}, {id:3, name:"0.8-alpha-3", category:"version"}, {id:4, name:"0.8-alpha-4", category:"version"}, {id:5, name:"0.8-alpha-1", category:"version"}, {id:6, name:"0.8-alpha-2", category:"version"}, {id:7, name:"0.8-alpha-3", category:"version"}, {id:8, name:"0.8-alpha-4", category:"version"}]

b) I want to send the tag identifier when the user sends the data, not the name.

c) I'm trying to add some kind of restriction to the input tag field: it cannot check a tag that is not in the JSON returned by my /repo/json call .

I don’t want to create a fork repository and possibly check for intersection between an array of users and a search using the beforeTagAdded option.

Currently, I am trying unsuccessfully because I don’t know where to find the list of tags to implement the intersection.

My js code is:

  $(function(){ $("#singleFieldTags").tagit({ tagSource: function(search, showChoices) { $.ajax({ url: "/repo/json", dataType: "json", data: {q: search.term}, success: function(choices) { showChoices(choices); } })}, beforeTagAdded: function(event, ui) { //if ($.inArray(ui.tagLabel, search) == -1) { // $("#singleFieldTags").tagit("removeTagByLabel", ui.tagLabel); // } console.log(ui.tag); }}); });

Html form:

 <form name="data" action="/repo/uploadMole" method="POST" enctype="multipart/form-data"> <input name="tags" id="singleFieldTags" ><br/> <input type="Submit"> </form>
+4
source share
2 answers

You ask if you want to send something else. Then take this single entry point:

 $('#data').submit(function() { // Change the value we are submitting var tagids = []; $.each($('#singleFieldTags').val().split(','), function(idx, taglabel){ tagids.push(lookup_tagid_for_label(taglabel)); } ) $('#singleFieldTags').val(tagids.join(',')); return true; // Let the event go on. });

This should change tags with identifiers before sending.

lookup_tagid_for_label , can make an ajax call again, but on the first search it may be cheaper to cache it in a field:

 $("#singleFieldTags").tagit({ autocomplete: { source: function(search, showChoices) { $.getJSON("/repo/json", {q: search.term}, function (data) { var choices = []; $.each(data, function (idx, tag) { choices.push(tag.name); $("#singleFieldTags").data(tag.name, tag.id); }); showChoices(choices); }); } });

Then you can replace lookup_tagid_for_label(taglabel) with $("#singleFieldTags").data(taglabel) .

Contrary to my other answer, this expected tag - it follows autocomplete-api, now it works .

+5
source

Changing tags when adding breaks removes and possibly other things. You can try to mitigate this by writing a beforeTagRemoved handler and possibly other handlers in the future. (pain to maintain).

As I said, you should use autocomplete api . The dock points to jquery-ui . The data may be in the following form:

... An array of objects with label and value properties: [{label: "Choice1", value: "value1"}, ...]

Therefore, I suspect that this may be enough:

  $("#singleFieldTags").tagit({ autocomplete: { source: function(search, showChoices) { $.getJSON("/repo/json", {q: search.term}, function(data) { var choices = []; $.each(data, function(idx, tag){ choices.push({label: tag.name, value: tag.id}) }); showChoices(choices); }); } } })

Unfortunately, this does not work as expected, as tag-it currently discards the tag and uses only the identifier when creating the tag. I think tag-it should be cleared and support full autocomplete api.

Update

The originator agrees with this. Thus, this answer may become the canonical answer in the future.

0
source

More articles:


All Articles