Question

I have a tagging plugin for jQuery that I’ve installed, and I want to couple it with jQuery UI’s autocomplete.

Both of the two plugins work fine independant of each other, but I am having trouble getting them to work together. I’ve enclosed a sample at a jsFiddle.

http://jsfiddle.net/ciel/ecbjG/

If you scroll to the bottom, you can comment out either of the two plugins and the other works fine. But with the tagging plugin enabled, the autocomplete does not function.

I was hoping someone could show me where I am making my mistake.

Answer 1

The tagging plugin will replace your text input with the id tags with an input control that has the id tags_tag.

So after you bind the tagging plugin to the input control you have to bind the autocomplete plugin to tags_tag.

$('#tags').tagsInput();

$("#tags_tag").autocomplete({
    source: availableTags,
    minLength: 2,
    select: function(event, ui) {
        // something will happen eventually ...
    }
});

update
The problem is that the tagging plug-in will add the tag if the input is losing focus (blur event). This event is fired before the autocomplete plugin can set the value of the input. Therefore the plugin takes the currently entered value (e.g. Pyt) and adds it as a tag instead of the selected value (e.g. Python). I have removed the blur event and triggered and keypress (simulating “Enter”) to make this work, but this is totally a hack 🙂 …

Maybe you want to study the tagging plug-in more deeply. I have seen it has a setting for autocomplete.

var settings = jQuery.extend({
    ...
    autocomplete: {
        selectFirst: false
    },
    ...
}, options);

see: http://jsfiddle.net/ecbjG/5/ (updated)