Cómo usar jquery autocompletar con múltiples tagit en struts 2

struts2 autocomplete

Question

Estoy usando el ejemplo de tag-it múltiple con autocompletar en jQuery en struts2. Pero no funcionó. No uso la etiqueta autocompletar de struts.

<script src="js/jquery.autocomplete.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
 $(''#tags input'').on(''focusout'',function(){ 
var txt= this.value.replace(/[^a-zA-Z0-9/+/-/./#]/g,'''');//allowed characters
if(txt) {
$(this).before(''<span class="tag">''+txt.toLowerCase()+''</span>'');
}
this.value="";
}).on(''keyup'',function(e){
// if: comma,enter(delimit more keyCodes with | pipe)
if(/(188|13)/.test(e.which))$(this).focusout();
});
 $(''#tags'').on(''click'',''.tag'',function(){
if(confirm("Really delete this tag?"))$(this).remove();
 });
});
</script>
<script type="text/javascript">
jQuery(function(){
$("#mytag").autocomplete("list.jsp");
});
</script>
<!-- tsk -->
//htlm input text tag------
 <div id="tags">
<input type="text" value="" placeholder="Add a tag" id="mytag" />
 </div>

Answer 1

Este es un ejemplo de trabajo con Tag-it y autocompletar. Échale un vistazo, mira cómo funciona, asegúrate de tomar las últimas bibliotecas y personalizarlas según tus necesidades:

Ejecutando demo

HTML

<ul id="mytags" >

</ul>

JS

$("#mytags").tagit({
    autocomplete: { source: function( request, response ) {
        $.ajax({
            url: "http://ws.geonames.org/searchJSON?username=foobar",
            dataType: "jsonp",
            data: {
                featureClass: "P",
                style: "full",
                maxRows: 12,
                name_startsWith: request.term
            },
            success: function( data ) {
                response( $.map( data.geonames, function( item ) {
                    return {
                        label: item.name + (item.adminName1 ? ", " 
                             + item.adminName1 : "") + ", " + item.countryName,
                        value: item.name
                    }
                }));
            }
        });
    }, minLength: 2 }
});