Javascript grailsjqueryajax自动完成can'；t过滤器搜索结果_Javascript_Jquery_Ajax_Grails_Jquery Autocomplete

Javascript grailsjqueryajax自动完成can'；t过滤器搜索结果

javascript jquery ajax grails

Javascript grailsjqueryajax自动完成can'；t过滤器搜索结果,javascript,jquery,ajax,grails,jquery-autocomplete,Javascript,Jquery,Ajax,Grails,Jquery Autocomplete,我正在根据本教程完成grails jquery ajax自动完成功能：但是，我的代码无法筛选结果列表。例如：如果我键入30，它应该只显示以30开头的结果。但我的代码显示了所有结果代码是： $('#sitePostCode').autocomplete({ source: function (request, response) { $.ajax({ url: getPostcodeValidateUrl(),

我正在根据本教程完成grails jquery ajax自动完成功能：

但是，我的代码无法筛选结果列表。例如：如果我键入30，它应该只显示以30开头的结果。但我的代码显示了所有结果

代码是：

$('#sitePostCode').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: getPostcodeValidateUrl(),
                dataType: "json",
                data: {
                    maxRows: 12,
                    name_startsWith: request.term
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.postCode,
                            value: item.postCode
                        }
                    }));
                }
            });
        },
        minLength: 2,
        select: function (event, ui) {
            $('#sitePostCode').val(ui.item.value)
        }
    });

试试这个

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Remote JSON datasource</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<r:script>
    $(function() {
        function log( message ) {
            $( "<div>" ).text( message ).prependTo( "#log" );
            $( "#log" ).scrollTop( 0 );
        }
        $( "#book" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "${createLink(controller: 'book', action: 'test')}",
                    dataType: "json",
                    data: {
                        maxRows: 12,
                        name_startsWith: request.term
                    },
                    success: function( data ) {
                        response( $.map( data, function( item ) {
                            return {
                                label: item.title,

                                value: item.title
                            }
                        }));
                    }
                });
            },
            minLength: 2
        });
    });
</r:script>
<r:layoutResources />
</head>
 <body>
 <div class="ui-widget">
 <label for="book">Your Book: </label>
 <input id="book">
 </div>
 <r:layoutResources />
 </body>
</html>

以上内容在我这边起作用。

您是否在操作中使用了“maxRows:12”。。。

def test() {
    def bookInstanceList = Book.createCriteria().list([max: params.maxRows]) {
        and{
            ilike('title', "%${params.name_startsWith}%")
        }
    }
    render bookInstanceList as JSON
}