Select2 choice field search [closed]

Question

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for SharePoint Stack Exchange.

Closed 2 years ago.

Improve this question

I am trying to attach the select2 to a choice field named: Filters. The functionality i'm interested in is the search function it provides.

This is my code, but I can't get it to work? Please help

 <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('Filters').select2();
});
              </script>

Thanks!

UPDATE - SOLUTION

The thing that was causing my problem was that i had several script editors on the newform, and all of them were referencing the jquery. When referencing more than one on the same page it causes select2 to not load.

This is the code that worked for me:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 

<script type="text/javascript">
$(document).ready(function() {
$('[title=Filters]').select2();
});
</script>

Answer 1

First of all, I think it's required to include jquery before select2. In order to apply select2 on your desired select field, you must target it with its title attribute like so:

$('[title=Filters]').select2();

You may right-click and inspect-element to be sure your field has that name.