matteodem / meteor-easy-search

Easy-to-use search for Meteor with Blaze Components
MIT License
438 stars 68 forks source link

Autosuggest usage example #629

Closed frankdre closed 2 years ago

frankdre commented 6 years ago

Being very new to Meteor, JS and almost everything else in this area, I have problems using autosuggest properly in Meteor/Blaze. In opposite to easySearch components which are well documented and led me to quick results, I have very basic difficulties using autosuggest: I don't know how to populate the box with an existing value in case of an document update scenario and I don't know how to read the selected value. The following is a very simple and not working code example to demonstrate my problems:

books = new Meteor.Collection('books');      //fields: boTitle, boAuthor
authors = new Meteor.Collection('authors'); //fields: auAuthor, auCountry

AuthorsIndex = new EasySearch.Index({
   collection: authors,
   fields: ['auName','auCountry'],
   engine: new EasySearch.MongoDB(),
});

<template name="content">
  <table>
    <tr><th>Book Title</th><th>current Author</th><th>new Author</th><th>update Author</th></tr>
    {{#each books}}
      <tr><td>{{boTitle}}</td><td>{{boAuthor}}</td><td>{{> autosuggest }}</td><td><button>Update</button></td></tr>
    {{/each}}
  </table>
</template>

<template name="autosuggest">
  {{> EasySearch.Autosuggest index=authorsIndex renderSuggestion='suggestLayout' changeConfiguration=selectizeConfig }}
</template>

<template name="suggestLayout">
  <div> {{label}} from {{authorsCountry}} </div>
</template>

Template.content.events({
  'click button' (event) {
 // very bad idea: Fails when more than one dropdown is selected
    var newAuthor=$("option:selected").text();
    books.update(this._id, { $set:{ boAuthor:newAuthor } } )
  },
});

Template.content.helpers({
  books () { return books.find() },
});

Template.autosuggest.helpers({
  authorsIndex: () => AuthorsIndex,
// no idea how to forward existing value boAuthor to selectize item[]
  selectizeConfig=???
});

Template.suggestLayout.helpers({
  authorsCountry (){ return this.doc.auCountry },
});

A working example in the documentation would help a lot.

matteodem commented 2 years ago

The documentation here together with knowledge about the Meteor framework itself should suffice https://github.com/matteodem/meteor-easy-search/tree/master/packages/easysearch_autosuggest