Home Limit ajax autocomplete results
Reply: 2

Limit ajax autocomplete results

Ken1995 Published in 2018-02-13 18:43:13Z

How do you limit the number of search result given that the data is not local. I know local data can be easily limited as shown below.

source: function(request, response) {
    var results = $.ui.autocomplete.filter(myarray, request.term);

    response(results.slice(0, 10));`

This is not working quite well when I get my data externally. Below is my code.

 $(function() {
    source: "/accounts/ajax/search/",
    minLength: 2,
    select: function(event, ui ){
    open: function(event, ui) {
        $('.ui-autocomplete').append("<li><a class = \" text-primary\" href='javascript:document.getElementById(\"search_form\").submit();'> See All Result </a></li>");
Jannes Botis
Jannes Botis Reply to 2018-02-13 19:20:45Z

You will have to make the ajax request yourself and pass the limited results to response callback.

By default, when source is a string, a GET request is made to the provided string with a parameter of name term and value the input value. So you have to reproduce this:

$( "#autocomplete" ).autocomplete({
    source: function( request, response ) {
          $.get('/accounts/ajax/search/', { term: request.term}, function(results) {
               response(results.slice(0, 10));
hankor Reply to 2018-02-13 19:16:59Z

You can replace the value for source with a function and then do the ajax request and result processing manually:

$(function() {
    source: function(request, response) {
      $.get("/accounts/ajax/search?term=" + request.term, function(data) {
        //limit results here
        response(data.slice(0, 10));
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.335336 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO