jQuery Autocomplete Plugin using Backbone JS

Question

Let's suppose I want to use jQueryUi for implemeting autocomplete in a backboneView having a form.

I implement the following code (*), but I don't like it because the fetching of the collection is performed also when the user does not type any letter.

How should I perform the fetching collection only when the user starts to type something in the input box?

var MyView = Backbone.View.extend({
    initialize: function () {
        this.myCollection = new MyCollection();
        this.myCollection.fetch(); // I would like to fetch the collection 
                                   // only when the user start to type the first letter  
    },
    events: {
        'focus #names': 'getAutocomplete'
    },

    getAutocomplete: function () {
        $("#names").autocomplete({
            source: JSON.stringify(this.myCollection)
        });
    }
});

P.S.:
the fetching should be performed just one time when the user types the first letter.

Paul · Accepted Answer · 2012-07-10 17:01:07Z

9

This should work and only call fetch once.

var MyView = Backbone.View.extend({
  initialize: function () {
    this.myCollection = new MyCollection();
    this.collectionFetched = false;
  },
  events: {
    'focus #names': 'getAutocomplete'
    'keydown #names': 'fetchCollection'
  },
  fetchCollection: function() {
    if (this.collectionFetched) return;
    this.myCollection.fetch();
    this.collectionFetched = true;
  },
  getAutocomplete: function () {
    $("#names").autocomplete({
        source: JSON.stringify(this.myCollection)
    });
  }
});

edited Jul 10, 2012 at 17:01

answered Jul 10, 2012 at 13:03

Paul

18.6k7 gold badges52 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lorraine Bernard Over a year ago

maybe did you miss to add this.collectionFetched = true somewhere?

Lorraine Bernard Over a year ago

Actually I did post another similar question because I would like to fetch the collection in autocomplete module. For more details Javascript module using jQueryUI.autocomplete and Backbone JS

unflores Over a year ago

This is going to hid getAutocomplete every time you focus on names. You might want to run that in initialize instead.

Justin wong · Accepted Answer · 2012-07-10 13:01:22Z

2

try like this :

var MyView = Backbone.View.extend({
    initialize: function () {
        this.myCollection = new MyCollection();

    },
    events: {
        'focus #names': 'getAutocomplete',
        'keydown #names':'invokefetch'
    },
    invokefetch : function(){
       this.myCollection.fetch(); 
       $("#names").unbind( "keydown", invokefetch);
    },    
    getAutocomplete: function () {
        $("#names").autocomplete({
            source: JSON.stringify(this.myCollection)
        });
    }
});

answered Jul 10, 2012 at 13:01

Justin wong

6386 silver badges15 bronze badges

1 Comment

Lorraine Bernard Over a year ago

+1 thanks for your time. Actually I did post another similar question because I would like to fetch the collection in autocomplete module. For more details Javascript module using jQueryUI.autocomplete and Backbone JS

Collectives™ on Stack Overflow

jQuery Autocomplete Plugin using Backbone JS

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related