[Grails] Grails 学习笔记 (五)-- 实战 Grails JQuery Autocomplete

icress 2011-06-15
一、Service

package org.icress.study
class ajaxService {
    static transactional = true
    def departmentList(departmentNumber) {
        return Department.findAllByDepartmentNumberIlike(
			departmentNumber + "%"
			, [max:10]
		)
    }
}


二、Controller

package org.icress.study
import grails.converters.JSON
class ajaxController {
    def ajaxService
    def departmentList = {
        render ajaxService.departmentList(params.q) as JSON
    }
}


三、GSP

textField name="departmentNumber"
hiddenField name="department.id" value="${demoInstance?.department?.id}"


四、Javascript

	$(document).ready(function() {
		$("#departmentNumber").val(
		'${demoInstance?.department?.departmentNumber}-${demoInstance?.department?.name}'
		);
		$("#departmentNumber").autocomplete(
			"${createLink(controller:'ajax', action: 'departmentList')}"
			, {  
				multiple: false,
				autoFill:true,
				width:150,    
				max:10,
				multipleSeparator: ' ',   
				dataType: 'json',    
				parse: function(data) {  
					var rows = [];
					for(var i=0; i<data.length; i++){
						rows[rows.length] = {   
							data:data[i],//drop down list value
							value:data[i].departmentNumber+"-"+data[i].name,
							result:data[i].departmentNumber+"-"+data[i].name
						};   
					}  
					return rows;  
				},  
				formatItem: function(row, i, n) {
					return row.departmentNumber+"-"+row.name;        
				}  
			}
		).result(function(event, data, formatted) {
			$("#department\\.id").val( !data ? null : data.id);
		});
	});


五、准备
<!-- jquery -->
jquery-1.6.1.js
<!-- jquery autocomplete -->
jquery.bgiframe.min.js
jquery.ajaxQueue.js
thickbox-compressed.js
jquery.autocomplete.min.js
jquery.autocomplete.css
thickbox.css
参考资料:
1、http://grails.1312388.n4.nabble.com/jQuery-Autocomplete-td2526439.html
2、http://clin8888.iteye.com/blog/295628
3、http://stackoverflow.com/questions/2373257/jquery-autocomplete-how-to-parse-a-json-request-with-url-info
4、http://docs.jquery.com/Plugins/Autocomplete
tianqingyu 2013-09-13
params.q
这个页面在哪设置
Global site tag (gtag.js) - Google Analytics