JQuery tag - it allows you to use tags only from autocomplete

Question

I am trying to implement a tag — its input, except that I want to restrict users to just selecting a value from the autocomplete field. I tried reevaluating the beforeTagAdded event using the original json and checking if the tag exists in the original property, but no luck.

here is the code, see beforeTagAdded function.

$(document).ready(function () { var itemId; var theTags = $('#msg_to'); theTags.tagit({ autocomplete: { source: [{ id: "1", value: 'David'}, { id: "2", value: 'John' }], minLength: 0, select: function (event, ui) { itemId = ui.item.id; theTags.tagit("createTag", ui.item.value); } }, showAutocompleteOnFocus: true, afterTagAdded: function (event, ui) { if (itemId) { $(ui.tag).find('input').attr('name', "tag[\'" + itemId + "']['" + ui.tagLabel + "']"); itemId = null; } }, beforeTagAdded: function (event, ui) { var id = ui.autocomplete.source; // not working // what to do next? } }) }); </script> 

Thank you in advance

Answer 1

My decision:

 $(function() { var currentlyValidTags = ['ac', 'dc']; $('input[name="_tags"]').tagit({ availableTags: currentlyValidTags, autocomplete: { source: function( request, response ) { var filter = removeDiacritics(request.term.toLowerCase()); response( $.grep(currentlyValidTags, function(element) { return (element.toLowerCase().indexOf(filter) === 0); })); }}, beforeTagAdded: function(event, ui) { if ($.inArray(ui.tagLabel, currentlyValidTags) == -1) { return false; } } }); }); 

Answer 2

The following works for me:

 var currentlyValidTags = []; $('#tags').tagit({ autocomplete: { source: function(req, resp) { search(req, function(data) { currentlyValidTags = data; resp(data); }); } }, beforeTagAdded: function(event, ui) { if (!_.contains(currentlyValidTags, ui.tagLabel)) { return false; } } }); 

The above solution works with version 2.0 in 65d6fb4dad833bf490f2a7b27063ecd08f792ede (differs from version 2.0 on the v2.0 tag).

Answer 3

There is a tag-it fork that will do what you want:

https://github.com/chrisleishman/tag-it

It has a requireAutocomplete parameter.

(I needed to combine both versions as I needed things from each ... but hopefully this helps you.)

Answer 4

If you are looking for autocomplete through ajax , here is the solution.

 //this will be set true only if fetched via ajax and also selected from autocomplete $.is_ajax_fetched = false; 

Inside autocomplete you will need the following events:

 select: function( event, ui ) { $.is_ajax_fetched = true; return true; }, //select event will not work alone as tag-it captures event to check for comma and other stuff close: function( event, ui ) { if($.is_ajax_fetched == true){ $('.ui-autocomplete-input').blur(); $('.ui-autocomplete-input').focus(); } } 

Now in the tag-it call, you will need to add the call events to the options:

 beforeTagAdded: function(event, ui) { if($.is_ajax_fetched != true){return false;} }, afterTagAdded: function(event, ui) { $.is_ajax_fetched = false; },