CODEWITHSUNDEEP
jqueryjquery-uibackbone.jsautocomplete
Danilo Vulović
Danilo Vulović

Reputation: 3063

Backbone.js + JQuery UI autocomplete - strange behavior

I'm using backbone.js for my SPA application, and need to include JQuery UI autocomplete widget in it.

Model

define(['underscore', 'backbone'], function(_, Backbone) 
{
   var Consumer = Backbone.Model.extend
   ({   
        initialize: function()
        {
        },
        toJSON: function() 
        {
            var data;

            var json = Backbone.Model.prototype.toJSON.call(this);

            _.each(json, function(value, key) 
            {
                 data = key;
            }, this);

            return data;
        }   
    });

    return Consumer;
});

Collection

define(['jquery', 'underscore', 'backbone', 'models/consumer'], function($, _, Backbone, Consumer)
{
    var Consumers = Backbone.Collection.extend
    ({
          model: Consumer,
          url: 'http://localhost/test',

          initialize: function()
          {
          }
    });

    return new Consumers;
});

View

define(['jquery', 'underscore', 'backbone', 'text!templates/home.html', 'collections/consumers', 'jqueryui'], function($, _, Backbone, homeTemplate, Consumers)
{
      var HomeView = Backbone.View.extend
      ({
             el: $("body"),

             initialize: function()
             {
                  this.collection = Consumers;

                  this.collection.fetch(({async: false}));
             },
             events: 
             {
                  'focus #consumer': 'getAutocomplete',
             },
             render: function(options)
             {          
                  this.$el.html(homeTemplate);
             },
             getAutocomplete: function () 
             {
                  $("#consumer").autocomplete(
                  {
                        source: JSON.stringify(this.collection),
                  });
             }
    });

    return new HomeView;
 });

Problem is that autosuggest sends strange GET request while user typing into it.

collection.fetch()

populate collection with following JSON array:

["11086","11964","14021","14741","15479","15495","16106","16252"]

When user start to type into autocomplete (for example 15), it sends following GET request:

http://localhost/test/%5B%2211086%22,%2211964%22,%2214021%22,%2214741%22,%2215479%22,%2215495%22,%2216106%22,%2216252%22%5D?term=15

What is the problem with my code?

Upvotes: 2

Views: 1563

Answers (1)

jakee
jakee

Reputation: 18566

From jQuery UI api docs concerning Autocomplete's source option:

String: When a string is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data.

When you do

$("#consumer").autocomplete({
  source: JSON.stringify(this.collection),
});

you provide a string, which makes autocomplete think you're giving an url, instead give it an array:

$("#consumer").autocomplete({
  source: this.collection.toJSON();
});

but then you have to have label and value properties for your models.

What I suggest you to do is that you create some separate function to your collection

getSuggestions: function() {
  // returns an array of strings that you wish to be the suggestions for this collection
}

and use that instead:

$("#consumer").autocomplete({
  source: this.collection.getSuggestions();
});

Upvotes: 3

Related Questions