Grails-具有多個值的jQuery自動完成

Question

單值自動完成功能可以很好地工作（ 感謝幫助過我的人 。），但是當我嘗試jQuery UI的多值示例時 ，它並沒有獲得我需要的資源。

這是我的控制器。

def courseList = {
    def cList = Course.withCriteria {
        ilike 'course', params.term +'%'
    }
render (cList.'course' as JSON)
}

這是我的_form視圖。

<div class="fieldcontain ${hasErrors(bean: studentInstance, field: 'courses', 'error')} required" >
<label for="course">
    <g:message code="student.courses.label" default="Courses" />
    <span class="required-indicator">*</span>
</label>
<g:textField name="course" id="coursetags" required="" value="${course?.course}"/>

這是我的jQuery腳本（完全來自jQuery UI演示）。

function split( val ) {
    return val.split( /,\s*/ );  
}

function extractLast( term ) {
    return split( term ).pop();  
}

var courses = ["English", "Music", "Science"];

$( "#coursetags" )
    // don't navigate away from the field on tab when selecting an item
    .bind( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB && $( this ).autocomplete( "instance" ).menu.active ) {
              event.preventDefault();
        }
    })
    .autocomplete({
        minLength: 2,
        source: function( request, response ) {
        // delegate back to autocomplete, but extract the last term
        response( $.ui.autocomplete.filter( courses, extractLast( request.term ) ) );
        },
        focus: function() {
            // prevent value inserted on focus
            return false;
        },
        select: function( event, ui ) {
            var terms = split( this.value );
            // remove the current input
            terms.pop();
            // add the selected item
            terms.push( ui.item.value );
            // add placeholder to get the comma-and-space at the end
            terms.push( "" );
            this.value = terms.join( ", " );
            return false;
        }
    }); 

當我在腳本中包含var courses標簽時，multiple-values-autocomplete可以正常工作。 如何將自動完成功能的源連接到控制器？

對於單個值，這就是我在腳本中所擁有的。

$("#coursetags").autocomplete({
    source: "/myApp/student/courseList",
    minLength: 2
});

先感謝您。

Answer 1

我找到了這個演示。 https://github.com/jquery/jquery-ui/blob/master/demos/autocomplete/multiple-remote.html

source: function( request, response ) {
    $.getJSON( "/myApp/student/courseList",
               {term: extractLast( request.term )},
               response );},

我替換了source部分，現在可以使用了。