Utilize Select2 for efficient filtering of options with the help of a search box

I have tried implementing select2 in my code, but I am unable to achieve the desired functionality of quick option filtering with a search box.

<link href="jsps/css/select2.css" rel="stylesheet" type="text/css"/>
<link href="jsps/css/select2-bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="jsps/css/bootstrap.css" rel="stylesheet" type="text/css"/>

<script src="jsps/js/select2.js" type="text/javascript"></script>
<script src="jsps/js/select2.min.js" type="text/javascript"></script>
<script src="jsps/js/bootstrap.js" type="text/javascript"></script>

$(document).ready(function(){ 
    alert( 'You are running jQuery version: ' + $.fn.jquery );
    alert("ready");
    $("#e1").select2();
});

<select id="e1" >
    <option value="0">select</option>
    <option value="AL">Alabama</option>
    <option value="GL">Germany</option>
    <option value="PL">Poland</option>
    <option value="WY">Wyoming</option>
</select>

Please assist me and point out any mistakes in my implementation. Thank you!

javajavascript

Answer №1

Make sure to place the jQuery code within the <scirpt> tag for proper functionality.

<link href="jsps/css/select2.css" rel="stylesheet" type="text/css"/>
<link href="jsps/css/select2-bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="jsps/css/bootstrap.css" rel="stylesheet" type="text/css"/>

<script src="jsps/js/select2.js" type="text/javascript"></script>
<script src="jsps/js/select2.min.js" type="text/javascript"></script>
<script src="jsps/js/bootstrap.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function(){ 
        alert( 'jQuery version in use: ' + $.fn.jquery );
        alert("ready");
        $("#e1").select2();
    });
</script>

<select id="e1" >
    <option value="0">choose</option>
    <option value="AL">Alabama</option>
    <option value="GL">Germany</option>
    <option value="PL">Poland</option>
    <option value="WY">Wyoming</option>
</select>

Functioning correctly here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the best methods for incorporating lengthy SVG code into HTML?

As I enhance my website with SVG animations, incorporating lengthy SVG code with id tags has become quite cumbersome. The current SVG code is occupying around 400 to 500 lines of HTML. Is there a more concise or compact method for including SVG code with ...

javascripthtmlcssanimationsvg

Obtain an Element Using Puppeteer

Currently grappling with a sensitive issue concerning puppeteer. The HTML structure in question is as follows: <tbody> <tr rel="0" class="disabled" id="user6335934" class="odd"> ...

javascripthtmlexpresspuppeteer

Issue with data decimation in Chart.js, encountering problems with parsing

I'm facing a challenge while plotting a graph using chart JS with approximately 300,000 data points. The performance is slow, so I am exploring ways to enhance it by utilizing the data decimation plugin. However, the data doesn't seem to be getti ...

javascriptjsonchart.js

For each item they possess, attach a "!" at the end

Given an array, I am trying to use map to add an exclamation mark to each item in the array. For example: Before - items: ["ball", "book", "pen"] After - items: ["ball!","book!","pen!"] const array = [ { username: "john", team: "red", score: 5 ...

javascriptarrays

I'm having trouble creating a text file using fs in Node.js. Can anyone offer assistance with this issue?

Struggling to write a text file using Fs in Node.js, but encountering the following error message. Error: call_and_retry_last allocation failed - process out of memory This is my current code: UserPayment.find({}, function(error, usersdata){ count = u ...

javascriptnode.jsmongodbasynchronousmongoose

JavaScript array reformatting executed

I have an array object structured like this. [ {student_code: "BBB-002-XRqt", questions: "Length (in inches)", answer: "8953746", time: "00:00:08:15"}, {student_code: "CCC-003-TYr9", questions: "He ...

javascriptarraysreactjssortingobject

Here is a helpful guide on using the replace() function in JavaScript to swap out specific words within a text that match

My task involves manipulating the following text: const a: string = 'I like orange, blue, black, pink, rose, yellow, white, black'; Along with this string: const b: string =['black', 'yellow']; The objective is to replace ...

javascriptarraystypescriptreplace

Even with the use of setTimeout, Angular 5 fails to recognize changes during a lengthy operation

Currently, I am facing an issue with displaying a ngx-bootstrap progress bar while my application is loading data from a csv file. The Challenge: The user interface becomes unresponsive until the entire operation is completed To address this problem, I a ...

javascriptangulartypescriptsettimeoutangular-changedetection

Retrieve information from MySQL database to display in Android application

I am trying to retrieve data from a MySQL database using PHP and display it in an Android activity. I have coded it to pass a JSON Array, but I am encountering a problem connecting to the server because my database is located on a local server. Can someone ...

javaphpandroidmysqljson

Is it possible for Java web services to interact with the intricate Stored Procedures of MongoDB?

I am embarking on the journey of developing an iOS application and I am considering using MongoDB as my database. However, I am faced with the challenge of writing complex stored procedures with Join Queries in MongoDB, which is a new territory for me. I ...

javaobjective-cswiftmongodbjava-stored-procedures

Sorting through JSON information using JQUERY

Struggling with filtering data using jQuery and JSON. I need to exclude objects with the ID "234" or the sender named "Alan Ford" in order to create separate messaging systems for Inbox and Outbox. Directly manipulating the JSON is not an option. Here&apo ...

javascriptjqueryjsonformatfiltering

Adjusting the z-index of an element with a simple click

Trying to tackle the challenge of adjusting the z-index of "content" relative to a clicked "menu-item". Progress has been made for menu items, but coming up short on the rest. In essence, clicking #m1 should set Z-Index 10 for #c1 and so forth. HTML < ...

javascriptjqueryhtmlcss

What are some ways to enhance the callback pattern?

I am exploring a pattern in which function1, function2, and function3 are linked together through their callbacks. Given that each of these functions may take up to 1 second to complete, I am interested in alternative approaches to prevent nesting from be ...

javascriptfunctiondesign-patternscallback

Tips for utilizing a Three.js curve to guide the movement of a mesh along a specified path

Developing an animation, currently at this stage: http://jsfiddle.net/CoderX99/66b3j9wa/1/ Please avoid delving into the code, it's written in CoffeeScript and may not be beneficial for your mental well-being. Imagine a "nordic" landscape with ship ...

javascriptthree.jscoffeescript

Having trouble accessing JSON file again: "Encountered unexpected end of input error"

I have set up a cron-based scheduler to periodically retrieve JSON data from an external API every 2 minutes. The process involves writing the data to a file, reading it, cleaning it, and then storing it in a MongoDB collection. Everything works smoothly o ...

javascriptjsonnode.jsmongodb

How can I update user profile details in PostgreSQL and Node.js without requiring all parameters to be sent in the request body each time?

I'm faced with a Postgres query structured like this: UPDATE farmers SET first_name=$1, last_name=$2, contact_no=$3, cooperative_name=$4 WHERE verification_id=$5 The challenge is that whenever I need to update the data, I have to send values for all ...

javascriptmysqlnode.jspostgresqlexpress

Updating the Navbar in React Routing does not happen automatically, but it does refresh when the page is refreshed

Currently, I am using vanilla React with React-Router for my project. One of the issues I am facing is detecting whether a user on the page has a token, indicating their logged-in status. While setting up routes for Login/Register/Logout functionalities, ...

javascriptreactjsexpress

The code in the head section is not running as expected

I've been exploring the possibilities of using lambda on AWS in combination with api gateway to create a contact form for a static S3 website, all inspired by this informative blog post: https://aws.amazon.com/blogs/architecture/create-dynamic-contact ...

javascripthtmlhead

Is it possible to hand-load/unload modules using angular.bootstrap?

My dilemma lies in creating a dynamic single page application that can load and unload AngularJS apps on demand within a designated "main content" section when selecting different menu options. Despite my efforts, I am consistently encountering the ng:bts ...

javascriptangularjs

Locate the submenu item in relation to the main menu item within an external container

I'm working on modifying the behavior of a site's sub-menu. The current sub-menu is displayed as a drop-down, but I want it to show up in a separate horizontal div instead. Here's what I have accomplished so far: jQuery(document).ready(fun ...

javascriptjqueryhtml