SemanticUI search: SOLVED

help
1

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

Thx for sharing! You could throttle the Meteor.call function to avoid unnecessary calls to the server while the user types. You could use lodash or underscore:

import throttle from 'lodash/throttle';

const throttleMethodCall = (methodname, delay = 1500) =>
    throttle((...args) => Meteor.call(methodname, ...args), delay);

…

const throttledUserSearch = throttleMethodCall('userSearch')

…

responseAsync(settings,callback) {
    const searchTerm = settings.urlData.query;
    throttledUserSearch(searchTerm,  (err, result) => {
        if (err) console.error(err); else callback({results: result})
    })
},
3

Good idea. I am getting frustrated with Semantic right now, though, because responsive handling of menus is just not as easy as with bootstrap or other frameworks. I have been experimenting with stackable, but that only gets me so far. There is no automatic hamburger menu, or the necessary event handling …