1

I am new to mentionsInput and have been trying to implement in a simple html page. I get error elmInputbox.elastic is not a function.

Here is my code.

<html>
 <head>

 </head>
 <body>
  <textarea class='mention'></textarea>

  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
  <script src='./jmi/underscore-min.js' type='text/javascript'></script>
  <script src='./jmi/elastic.min.js' type='text/javascript'></script>
  <script src='./jmi/jquery.mentionsInput.js' type='text/javascript'></script>
  <script>
  
     $('textarea.mention').mentionsInput({
      onDataRequest:function (mode, query, callback) {
      var data = [
        { id:1, name:'Kenneth Auchenberg', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
        { id:2, name:'Jon Froda', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
        { id:3, name:'Anders Pollas', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
        { id:4, name:'Kasper Hulthin', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
        { id:5, name:'Andreas Haugstrup', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
        { id:6, name:'Pete Lacey', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
        { id:7, name:'kenneth@auchenberg.dk', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
        { id:8, name:'Pete Awesome Lacey', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
        { id:9, name:'Kenneth Hulthin', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' }
      ];

      data = _.filter(data, function(item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 });

      callback.call(this, data);
    }
  });
  </script
 </body>
</html>
P. Frank
  • 5,691
  • 6
  • 22
  • 50
user3262234
  • 21
  • 7
  • your mentionsInput plugin might be missing – murli2308 Oct 13 '16 at 13:29
  • I extracted the mentionsInput zip file into the jmi folder (as you can see from the code above). Inside that, are the contents of mentionsInput zip file. I also checked the code against that given on the https://podio.github.io/jquery-mentions-input/ – user3262234 Oct 13 '16 at 13:58
  • Also, when I click on the mentionsInput.js, I can see the javascript file. So I believe this has to be with the elastic.js – user3262234 Oct 13 '16 at 14:08
  • 2
    I did a workaround. In the mentionsInput.js, I set the defaultsettings.elastic to false. It works fine. – user3262234 Oct 13 '16 at 14:14

1 Answers1

0

You just need to copy lib/jquery.elastic.js along with jquery.mentionsInput.js. This is mainly important if you want to make the component grow and shrink to fit its content. (As per their documentation) under dependencies.

Dina Nashaat
  • 27
  • 1
  • 8