CODEWITHSUNDEEP
javascriptjquerymeteorselectize.js
Le Dac Sy
Le Dac Sy

Reputation: 381

How to get get selected id and text value using selectize.js. meteor?

I am using selectize with meteor via this example: meteor is not working with selectize.js

Template.hello.onRendered(function(){
$('#select-links').selectize({
  maxItems: null,
  valueField: 'id',
  searchField: 'title',
  options: [
    {id: 1, title: 'DIY', url: 'https://diy.org'},
    {id: 2, title: 'Google', url: 'http://google.com'},
    {id: 3, title: 'Yahoo', url: 'http://yahoo.com'},
  ],
  render: {
    option: function(data, escape) {
      return '<div class="option">' +
          '<span class="title">' + escape(data.title) + '</span>' +
          '<span class="url">' + escape(data.url) + '</span>' +
        '</div>';
    },
    item: function(data, escape) {
      return '<div class="item"><a href="' + escape(data.url) + '">' + escape(data.title) + '</a></div>';
    }
  },
  create: function(input) {
    return {
      id: 0,
      title: input,
      url: '#'
    };
  }
});

});
<!-- html -->
<template name="hello">
<select id="select-links" placeholder="Pick some links..."></select>
</template>

So on the onChange event I want to get the

value and id

of that value to save to the database.

The result could be something like this: {id: 1, text: google}

So How can I do that ?

from a newber of meteor

Upvotes: 1

Views: 3291

Answers (2)

Le Dac Sy
Le Dac Sy

Reputation: 381

Note this point:

const getLinkTitle = (id) => {   let title;   if (id) {
    const selectedLink = _.find(selectLinks, (link) => {
      `return link.id === parseInt(id);`
    });
    if (selectedLink) {
      title = selectedLink.title;
    }   }   return title; };

 `return link.id === parseInt(id);`

Take care that line of code. It depend on your id. I am using mongoDB so it's not a number anymore in my real application.

Upvotes: 0

hwillson
hwillson

Reputation: 1399

You can leverage the onChange callback that selectize supports out of the box. Here's a working example.

import { Template } from 'meteor/templating';
import { $ } from 'meteor/jquery';
import { _ } from 'meteor/underscore';

import selectize from 'selectize';

import './main.html';
import 'selectize/dist/css/selectize.css';

const selectLinks = [
  { id: 1, title: 'DIY', url: 'https://diy.org' },
  { id: 2, title: 'Google', url: 'http://google.com' },
  { id: 3, title: 'Yahoo', url: 'http://yahoo.com' },
];

const getLinkTitle = (id) => {
  let title;
  if (id) {
    const selectedLink = _.find(selectLinks, (link) => {
      return link.id === parseInt(id);
    });
    if (selectedLink) {
      title = selectedLink.title;
    }
  }
  return title;
};

Template.body.onRendered(function onRendered() {
  $('#select-links').selectize({
    maxItems: null,
    valueField: 'id',
    searchField: 'title',
    options: selectLinks,
    render: {
      option: function(data, escape) {
        return '<div class="option">' +
            '<span class="title">' + escape(data.title) + '</span>' +
            '<span class="url">' + escape(data.url) + '</span>' +
          '</div>';
      },
      item: function(data, escape) {
        return '<div class="item"><a href="' + escape(data.url) + '">' + escape(data.title) + '</a></div>';
      }
    },
    create: function(input) {
      return {
        id: 0,
        title: input,
        url: '#'
      };
    },
    onChange: function (values) {
      if (values) {
        values.forEach((value) => {
          // Can save to your collection/database here; for now 
          // just logging in the format you requested.
          console.log({
            id: value,
            text: getLinkTitle(value)
          });
        });
      }
    }
  });
});

Upvotes: 1

Related Questions