grails中使用jqueryui的autocomplete

1.在前边的文章中介绍了应用jqueryUi的autocomplete，但是那是在grails的1.4版本中使用

的，现在工程任然使用的1.3.7版本，关于1.3.7使用jquery可以参考这篇文章Grails从1.4m1

版本回退到1.3.7。

 

2.当时只是实现了最基本的功能，可以实现自动显示匹配的问题，但是随着工程的进行，这里

边需要完成一些更为细微的功能，首先就是两个文本框，其中一个使用autocomplete，产生

自动联想，然后第二个文本框的值是根据第一个文本框的值来获得的，例如一个作者的名字有

中英文，我们在中文名的输入框中使用autocomplete，选择作者名，然后英文作者名会自动

显示。效果如下：

代码如下：

$( "#cAuthor" ).autocomplete({
              source: function(request,response){
                   $.ajax({
                       type: "POST",
                          url:"../author/niuCh/?keywords="+ encodeURIComponent($( "#cAuthor" ).val()),
                           dataType:"json",
                           data:request,
                           success: function( data ) {
                               response($.map(data.author, function( item ) {                                   return {
                                       label:item.name,//下拉框上显示的值
                                       value: item.name,//最后显示在文本框中的值
                                       ename :item.eName,//为下边使用

                             }
                               }));
                           }
                       }
                   );   
               },
             
               focus: function( event, ui ) {
                     if(ui.item.ename){
                       $("#eAuthor").val(ui.item.ename);
                     }
               },
           });

 

 

上边就是实现autocomplete的代码，红色的字体实现关联，focus这个属性可以参考

jqueryUIautocomplete的官方文档，http://jqueryui.com/demos/autocomplete/

当焦点在下拉框时，会自动为后面一个文本框赋值，这里我将第一个文本框的id定义为

cAuthor，第二个文本框的ID定义为eAuthor。

但是在测试中发现了一些问题，刚开始使用的firefox和chrome这两个浏览器，并且没用加encodeURIComponent，没发现问题，但是用IE测试时，却出现了问题，不能进行联想。

先是在客户端利用alert()输出文本框的值，显示正常，然后我又在后台打印传入的参数，发现

了问题，传入的参数是乱码，然后我就上网查了下，发现这个问题还挺常见，试了一些方法，

最后发现加上encodeURIComponent，程序可以正常运行了。

3.第二个功能就是当输入的值在数据库中没有的时候，程序会自动保存，并且提示用户，该作

者名已经被保存。效果如下：

这里用到ajax，先看下代码：

客户端：

<script>

$("#cAuthor").focusout(function(){
     if($("#cAuthor").val()){
          $.ajax({
        type: "POST",
        contentType: "application/x-www-form-urlencoded; charset=utf-8" ,
        url:"../author/niuEn/?keywords="+encodeURIComponent($("#cAuthor").val()),
        success:function(data){
            if(data){
             $("#re").empty();
             $("#eAuthor").val("");
            $("#re").append("<div class='addAuthor'>"+data+"</div>");
            }else{
                $("#re").empty();
                }
        }
        });
     }
     });

</script>

<label for="cAuthor">作者</label>
      <g:textField name="cAuthor" id="cAuthor"
                                    value="${bookInstance?.cAuthor}" />

<div id="re" align="left"></div>

后台代码如下：

def niuEn = {
        def keywords =  params.keywords
                 def author = Author.findByCName(keywords)
         if(author){
             render{
                 }
             }else{
            def  newAuthor = new Author()
            newAuthor.cName = keywords
            newAuthor.eName = keywords
            newAuthor.save(flush:true)
            render {
                div(id:"myDiv", "此作者不存在,已为你添加")
                }
             }
        }

 

css文件

.addAuthor{
    font-size: 0.8em;
    line-height: 2;
    width:150px;
    background: #fff3f3;
    border: 1px solid #ffaaaa;
    color: #cc0000;
     
}

当焦点离开这个文本框的时候，会触发这个事件，给后台传递当前文本框中的值，然后后台判

断这个值在数据库中是否存在，如果存在，什么也不返回，如果不存在则返回一个html片段，

告诉客户端，然后客户端显示。

上边这些代码基本已经完成所需功能。