Question

根据本教程，我正在使用grails jquery ajax自动完成功能： http://jqueryui.com/autocomplete/#remote-jsonp

但是，我的代码无法过滤结果列表。例如：如果我输入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)
        }
    });

Answer 1

试试这个......

<!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>

在控制器方面我只是这样做了：

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

上述工作正在我身边。

Grails jquery ajax autocomplete无法过滤搜索结果

1 个答案: