Question

单值自动填充工作正常（thanks to people who helped me with it。）但是当我尝试the jQuery UI's multiple value example时，它没有得到我需要的来源。

这是我的控制器。

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标记时，多值自动完成功能正常工作。如何将自动完成的源连接到我的控制器？

对于单个值，这就是我在脚本中的内容。

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

提前谢谢。

Answer 1

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

GenericTag

我替换了source: function( request, response ) { $.getJSON( "/myApp/student/courseList", {term: extractLast( request.term )}, response );},部分，现在可以正常使用。

Grails - 具有多个值的jQuery自动完成

1 个答案: