2014-01-08 56 views
0

我做的jQuery AJAX的自動完成功能根據本教程Grails的: http://jqueryui.com/autocomplete/#remote-jsonpGrails的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) 
     } 
    }); 
+0

您在動作中是否使用了「maxRows:12」... – Abs

回答

0

試試這個....

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

以上是在我的工作側。