Since I just spent a couple of hours to figure out how to properly implement SemanticUI search with a Meteor method as the source, I figured I post the solution here.
Example is a search field that allows to search for users
<template name="userSearch">
<div class="ui search">
<div class="ui icon input">
<input class="prompt" type="text" placeholder="Search for user name..." autocorrect="off" spellcheck="false">
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>
</template>
here is how to make it work
Template.userSearch.onRendered(function() {
const instance = this;
instance.search = instance.$('.ui.search').search({
minCharacters: 2,
onSelect: function (user) {
},
apiSettings: {
//
// this behaves like the usual jQueryUI
//
responseAsync(settings,callback) {
const searchTerm = settings.urlData.query;
Meteor.call('userSearch', searchTerm, function (err, result) {
if (err) console.error(err); else callback({ results: result });
})
},
}
});
And this is the server side method
Meteor.methods({
userSearch(searchTerm){
// console.log(`userSearch ${searchTerm}`);
return Meteor.users.find({
username: { $regex: searchTerm, $options: 'i' }
})
.map(function (user) {
return {
title: user.username,
id: user._id,
};
});
}
});