Autocomplete not working

[Julian-Th]

Hi everyone,

not sure what I missed in the documentation, but I want to use autocomplete for the 'username' of ALL registered users (i.e. Meter.users collection). I'm new to Meteor, so I assume it's something very obvious.

Here is my code:

HTML input field

{{> inputAutocomplete settings=settings id="msg" class="input-xlarge" placeholder="Add Collaborator..."}}

JS helper

Template.modalAddCollaborators.helpers({
    'addedCollaborators': function () {
        return Courses.find().fetch();
    },

    settings: function() {
        return {
          position: "bottom",
          limit: 5,
          rules: [
            {
              collection: Meteor.users,
              field: "username",
              matchAll: true,
              template: Template.userPill
            }
          ]
        };
    }
});

Issue 1: So far autocomplete only matches the search field to the currently logged in user, not to ALL users.

Issue 2: The drop down list with matches looks like this: http://snag.gy/1gDOE.jpg

Can anyone hint me in the right direction?

Thanks so much!

Julian

[chazsolo]

@Julian-Th Meteor by default only publishes (and subscribes to) the currently logged in user to the client. You'll need to set up a new publication/subscription that passes the usernames (and any other related data) to the client for that to work.

[andrew-filippov]

Hi guys,
I've created in template:

{{> inputAutocomplete name="postcode" settings=settings }}

... and settings in template's helpers :

settings(){
        return {
            position:"bottom",
            limit:5,
            rules:[{
                collection:"PostcodeLocations",
                field:"postcode",
                subscription:"app.postcodelocations.autocomplete",
                matchAll: true,
                template:Template.testTmpl
                }]
        };
    }

... also I have added some staff into template's code for debug purposes :

var autoPostcodeLocations = new Mongo.Collection("autoCompleteLocations");
...
Template.createLocationModal.onRendered(function () {
...
// print received data
this.autorun(()=>console.log(autoPostcodeLocations.find({}).fetch())); 
...
});

my publishing:

Meteor.publish('app.postcodelocations.autocomplete', function (selector, options) {
    check(selector, Object);
    check(options, Object);
    var sub = this;

    options.limit = Math.min(10, Math.abs(options.limit));

    var handle = PostcodeLocations.find(selector, options).observeChanges({
        added:function(id, fields) {console.log('added - %s', id);
            sub.added("autoCompleteLocations", id, fields);
        }
    });
    
    sub.ready();
    sub.onStop(function(){ handle.stop(); });
});

when I try to type into textbox, publishing works (I see console output on server side). Also client has that data received (output in browser's console - print received data section), but widget is always claims 'No matches'.
In other case - when I have configured autocomplete control to use a local collection (see samples below), it works fine:

// this is template's behind code
// import collection definition
import { PostcodeLocations } from '/imports/api/postcodeLocations/collection'; 
...
Template.createLocationModal.onRendered(function () {
...
// simple subscribe
    Meteor.subscribe('app.postcodelocations.autocomplete');
...
});
...
//helpers
Template.createLocationModal.helpers({
    schema: () => locationSchema,
    settings(){
        return {
            position:"bottom",
            limit:5,
            rules:[{
                collection:PostcodeLocations,
                field:"postcode",
                template:Template.testTmpl
                }]
        };
    }
});

// my simple publication
Meteor.publish('app.postcodelocations.autocomplete', function () {
    return PostcodeLocations.find({ postcode: { '$regex': '^a', '$options': 'i' } }, {limit:10});
});

What I have missed here? any idea?

[openp2pdesign]

For me it works with these elements:

Publication of users:

// Publish users
Meteor.publish('usersList', function() {
    return Meteor.users.find({}, {
        fields: {
            'emails': 1,
            'username': 1,
        }
    });
});

These are the settings for the autocomplete

Template.MyTemplate.helpers({
    autocompleteSettingsUser: function() {
        return {
            position: "bottom",
            limit: 8,
            rules: [{
                    token: '@',
                    collection: Meteor.users,
                    field: "username",
                    template: Template.UserPill,
                    noMatchTemplate: Template.NotFoundPill
                },
            ]
        };
    },
});

And subscribe to the publication in the userPill template (Template.UserPill):

Template.UserPill.onCreated(function () {
    Meteor.subscribe("usersList");
});