Javascript module using jQueryUI.autocomplete and Backbone JS

Question

Let's suppose I want to use jQueryUi.autocomplete for making a module which take the source from a backboneCollection.

I implement the following code (1) for the autocomplete module and
the following for the Backbone.view (2).

Actually, 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 or the source function only when the user starts to type something in the input box?

P.S.:
I have already posted a similar question jQuery Autocomplete Plugin using Backbone JS , but since the needs of aoutocomplete module could be shared between different view I decided to move the fetch of the collection in autocomplete module.

(1)

/*global define */
define([
    'users',
    'jquery',
    'jqueryUi'
], function (UserCollection, $) {
    "use strict";
    var autoComplete = function(element) {

        var userCollection,
            data;

        userCollection = new UserCollection(); 
        userCollection.fetch();

        data =  userCollection.toJSON();

        element.autocomplete({
            minLength: 3,
            source: function(request, response) {
                var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                response($.grep(data, function(value) {
                    return matcher.test(value.name);
                }));
            },
            create: function() {
                element.val(data.name);
            },
            focus: function(event, ui) {
                element.val(ui.item.name);
                return false;
            },
            select: function(event, ui) {
                element.val(ui.item.name);
                return false;
            }
        }).data('autocomplete')._renderItem = function(ul, item) {
            return $('<li></li>')
                .data('item.autocomplete', item)
                .append('<a><img src="' + item.avatar + '" />' + item.name + '<br></a>')
                .appendTo(ul);
        };
    };

    return autoComplete;
});

(2)

// View1 (view using the module autocomplete)
define([
    'autoCompleteModule'
], function (autoCompleteModule) {
    var MyView = Backbone.View.extend({

        events: {
            'focus #names': 'getAutocomplete'
        },
        getAutocomplete: function (e) {
            autoCompleteModule($('#names'));
        }
    });
});

Community · Accepted Answer · 2017-05-23 11:59:46Z

2

//Pseudo code from jQuery Autocomplete Plugin using Backbone JS

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)
    });
}

});

EDIT-20120711--------- how about this:

//Pseudo code ...

// View1 (view using the module autocomplete)
define([
    'autoCompleteModule'
], function (autoCompleteModule) {
    var MyView = Backbone.View.extend({

        events: {
            'keydown #names': 'getAutocomplete'
        },
        getAutocomplete: function (e) {
            var el = $('#names');
            if(!el.data){
                autoCompleteModule(el);
            }
        }
    });
});

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Jul 10, 2012 at 22:23

Justin wong

6386 silver badges15 bronze badges

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

2 Comments

Lorraine Bernard Over a year ago

thanks, +1 for your idea...Actually what I am asking is a little different. Your pseudo code works great if you have just one view using autocomplete and myCollection. Let's suppose you have two views using the same myCollection you will have two fetch for the same collection. For this reason I created a module for autocomplete.

Justin wong Over a year ago

@LorraineBernard key,I updated the answer, see if it is not what you want.

Collectives™ on Stack Overflow

Javascript module using jQueryUI.autocomplete and Backbone JS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related