如何使用jQuery自动完成与Struts 2的倍数tagit [英] How to use jquery autocomplete with multiple tagit in struts 2

问题描述

我使用多个标签，例如它在struts2.But自动完成jQuery的它不是worked.I我不是使用Struts标签自动完成

 ＆LT;脚本SRC =JS / jquery.autocomplete.js＆GT;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =htt​​p://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js＆GT;＆下; /脚本＆GT;
＆LT;脚本SRC =JS / jQuery的-1.4.2.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（函数（）{
 $（'＃标签输入'）。在（'事件的内容'，函数（）{
VAR TXT = this.value.replace（/ [^ A-ZA-Z0-9 \\ + \\  -  \\ \\＃] /克，''）; //不允许的字符
如果（TXT）{
$（本）。之前（'＆LT;跨度类=标签＆GT;'+ txt.toLowerCase（）+'＆LT; / SPAN＆GT;'）;
}
THIS.VALUE =;
}）。在（'KEYUP'，函数（E）{
//如果：逗号，输入（划定多个关键codeS用|管道）
如果（/（188 | 13）/测试（e.which））$（本）.focusout（）;
}）;
 $（'＃标签'）。在（'点击'，'标签'，函数（）{
如果（确认（确实要删除这个标签吗？））$（这）一个.remove（）;
 }）;
}）;
＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
jQuery的（函数（）{
$（＃MyTag的），自动完成（的List.jsp）;
}）;
＆LT; / SCRIPT＆GT;
＆LT;！ -  TSK  - ＆GT;
// HTLM输入文本标签------
 ＆LT; D​​IV ID =标签＆GT;
＆LT;输入类型=文本值=占位符=添加标签ID =MyTag的/＆GT;
 ＆LT; / DIV＆GT;
 

解决方案

这是一个工作的例子有标签，并自动完成。检查出来，看看它是如何工作的，一定要采取最新的库，并根据需要自定义：

<大骨节病> 运行演示

HTML

 ＆LT; UL ID =mytags＆GT;＆LT; / UL＆GT;
 

JS

  $（＃mytags）。tagit（{
    自动完成：{来源：功能（请求，响应）{
        $阿贾克斯（{
            网址：http://ws.geonames.org/searchJSON?username=foobar
            数据类型：JSONP
            数据：{
                要素类：P
                风格：全，
                maxRows进行：12，
                name_startsWith：request.term
            }，
            成功：功能（数据）{
                响应（$ .MAP（data.geonames，函数（项目）{
                    返回{
                        标签：item.name +（item.adminName1，
                             + item.adminName1：）+，+ item.countryName，
                        值：item.name
                    }
                }））;
            }
        }）;
    }的minLength：2}
}）;
 

I am using multiple tag-it example with autocomplete in jQuery in struts2.But its not worked.I am not use struts autocomplete tag.

<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>

解决方案

This is a working example with Tag-it and autocomplete. Check it out, look how it works, be sure to take the latest libraries and customize it to your needs:

Running 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 }
});

这篇关于如何使用jQuery自动完成与Struts 2的倍数tagit的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！