2

To turn a normal Html select into a select2 the documentation says to simply call select2() on the normal Html select like this

$(document).ready(function() {
    $('.js-example-basic-single').select2();
});

When I tried this out, I also imported the select2 module that I installed via npm.

import select2 from 'select2';

What is name of the Javascript feature / concept / technology that allows one to add a new function (in this case .select2()) to an existing object?

Update I forgot to mention that I'm using jquery which is what BJRINT picked up. So it seems this is a jquery + select2 thing.

robor
  • 2,969
  • 2
  • 31
  • 48
  • 2
    read about javascript prototype. – dfsq May 24 '19 at 18:36
  • monkey-patching? https://davidwalsh.name/monkey-patching But it's not just JavaScript that allows it. – Heretic Monkey May 24 '19 at 18:37
  • 2
    I see you're using JQuery. In this case it's a basic feature the creators of the lib made called `plugins`. And it's [pretty easy to implement](https://learn.jquery.com/plugins/basic-plugin-creation/) – BJRINT May 24 '19 at 18:39
  • 1
    Take a look at [How to create a jQuery plugin with methods?](https://stackoverflow.com/q/1117086/691711) – zero298 May 24 '19 at 18:44
  • 1
    There's a issue with Jquery and Select2, check out my answer down there. – Danielr May 24 '19 at 19:37

5 Answers5

3

There is one thing you have misunderstood. You said To turn a normal Html select into a select2 the documentation says to simply call select2() on the normal Html select like this but that isn't a normal HTML select element.

WHen you use the syntax $(), you are using jQuery to access your "normal" html element.

Like the others pointed out, Select2 was able to add a method here because jQuery has an extensible plugin architecture that allows to add new behaviors (methods) to the main jQuery object, in your case, $().

Arthur Almeida
  • 568
  • 2
  • 8
3

What is name of the Javascript feature / concept / technology that allows one to add a new function (in this case .select2()) to an existing object?

Well JavaScript has prototypal inheritance, which means that objects can inherit methods from other objects. Now as you can add properties to any object at any time, this is not really a feature, but rather the result of the underlying language design. In other languages they would be called extension functions

  const prototype = { };
  const instance = Object.create(prototype);

  console.log(instance.method); // does not exist yet

 prototype.method = function() { };

 instance.method(); // exists now

Now for HTML Elements that also applies: They are inheriting the Element class, and you can easily add methods to its prototype:

 Element.prototype.method = function() {
   console.log(this);
 }

 document.body.method();

In your case you do not have an HTML element directly though, but rather a jquery instance object, that wraps around the native element object. However the basic concept of inheritance applies to that too, which means that adding methods to $.fn gets reflected to all jQuery instances. Thats what the plugin is doing.

Jonas Wilms
  • 132,000
  • 20
  • 149
  • 151
3

What is name of the Javascript feature that allows one to add a new function to an existing object?

Short answer:

Prototypes.

Prototypes are the mechanism by which JavaScript objects inherit features from one another. The prototype property can be used to add methods to existing constructors.

For more details about JavaScript prototype, you can refer to MDN documentation on Object prototypes.

Detailed answer:

  • select2 is a jQuery plugin. If you inspect it's source code, you'll find that it extends $.fn with a new function called select2:
$.fn.select2 = function (options) {..}

  • If you inspect jQuery's source code, you'll find that jQuery.fn is an alias of jQuery.prototype:
jQuery.fn = jQuery.prototype = { ... }


  • And, also in jQuery's source code, you can find that the global variable '$' is an alias for the jQuery object:
window.jQuery = window.$ = jQuery;

So, basically...

  • $ is an alias for the jQuery() function
  • $('.js-example-basic-single') returns a jQuery object
  • Your plugin has extended this jQuery object with a new method select2()
Community
  • 1
  • 1
ludovico
  • 2,103
  • 1
  • 13
  • 32
2

This is called JQuery plugin.

Here is a snippet from JQuery documentation

$.fn.greenify = function() {
    this.css( "color", "green" );
};

$( "a" ).greenify(); // Makes all the links green.
Charlie
  • 22,886
  • 11
  • 59
  • 90
1

In one thread of stackoverflow some user said that there's a problem with certain Jquery versions and select2. Select2() is not a function

In stackoverflow code snippet is totally working.

I did this: https://jsfiddle.net/avfjoLtd/61/

$(document).ready(function() {
    $('.js-example-basic-multiple').select2();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

</head>
<body>


<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>
</body>
</html>

But fiddle keep saying Cannot read property 'bind' of undefined. using outside fiddle, it works

Danielr
  • 90
  • 8