I've spent hours troubleshooting the select2.jquery ajax and json search functionality, but so far I haven't been able to find a solution despite my efforts

Having trouble with adding the jQuery plugin select2 to my HTML. I've included select2.min.js in my code.

This is my HTML:

And this is my JS:

$(document).ready(function(){

$.ajax({ url: '/creditdebit/credit/association', type: "GET", success: function(data, textStatus, jqXHR) {

        var xdata = $.map(data, function (obj) {
            obj.text = obj.text || obj.name;  
            return obj;
        });

        $(".association").select2({
            placeholder: "test",
            data:xdata,
             search: data.term,

        });

    },
    error: function (request, textStatus, errorThrown) {
        swal("Error ", request.responseJSON.message, "error");
        if(request.status == "401"){
            alert("Unauthorized Access ");
            return false;
        }
    }
});

});

The issue arises when trying to search for associations. The search feature is not working properly and seems to be malfunctioning in unexpected ways.

Answer №1

<html>
<body>
  <div class="form-group rows">
  <div class="col-md-9">
<select  name="socNumber" id="mySelect" class="select2 form-control custom-select"  style="width: 100%; height:36px;>
<option value="" label="">
<c:forEach items="${associations}" var="assoc" >//from attribute in my controller
<option  value="${assoc.code}">${assoc.name}</option>
</c:forEach>
</select>
 </div>
</div>
<script type="text/javascript">
    $(function() {
 $("#mySelect").select2({
       dir: "rtl",
})    
  });

   </script>
</body>
</html>

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

Put the values into an array format for each key within an object using JavaScript

I am attempting to transform an array containing email addresses into an object. How can I insert values in the value array for a single key? var list = [ "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6903060107291008010 ...

Experiencing a Problem with Vue Form Input Bindings when Using Conditional Binding

Could someone provide assistance with adding a condition to this Binding that outputs different bindings depending on the number of commas in the input? <p>{{ target}}</p> <input v-model="target" placeholder="Enter Your Target ...

JavaScript variable not refreshing its value after submitting an HTML form

In my HTML form, I have 8 textboxes enclosed in div tags with IDs ranging from fa1 to fa8. By default, two of the textboxes are visible while the remaining six are hidden. To toggle the visibility of these divs, I've implemented two buttons - addfa an ...

Filtering URLs using Firefox extension

As the page loads, multiple HTTP requests are made for the document and its dependencies. I am looking to intercept these requests, extract the target URL, and stop the request from being sent if a specific condition is met. Additionally, plugins may als ...

Ways to evaluate the amount of traffic on a webpage?

Recently, I encountered an issue while creating a page to showcase blog posts. Each post had the typical social media share buttons like "Facebook like," "tweet this post," and "+1." Additionally, there were some extra JavaScript functions added for variou ...

Tips for saving a web page using Selenium Webdriver in JavaScript

Is there a way to programmatically save an entire webpage using Selenium Webdriver JS in Firefox? I have been able to bring up the Save As dialog with the following code: driver.findElement(webdriver.By.tagName('html')).sendKeys(Key.CONTROL + &ap ...

sending the properties from the menu component to the dish details

Having trouble with a react.js app I'm working on that involves rendering dish cards. The dish object is always null when passed as props from MenuComponent to DishDetail, resulting in nothing being displayed on the screen. Can someone please assist m ...

Enhancing User Experience with jQuery Animation in place of .show()

Looking to add a creative touch to my .show() jquery function for revealing previously hidden text. Any unique animation suggestions? I'm open to any animations you recommend, and I also want the user's window to scroll down automatically so tha ...

ThreeJS - Implementing point light shadows as spotlights

In my current scene, I have both ambient light and a point light. I want to achieve shadows underneath the meshes similar to the image provided, but the central area shows an unwanted shadow. It appears that the point light is behaving like a spot light i ...

Creating a filter function that targets boolean values in an array object can be achieved using JavaScript

let quizQuestions = [ { question: "What is the capital of France?", answers: [ { text: "Paris", correct: true }, { text: "Rome", correct: false }, { text: "Berlin", correct: false }, { tex ...

Is it possible for Angular 7 to disconnect from the internet?

I am looking to disable all buttons, clicks, and hyperlinks while displaying a backdrop with the message "GO ONLINE". It may come off as rude, but it is necessary. AppComponent (TS): The connectionMonitor can be used to monitor network connectivity. pr ...

Encountering difficulties in accessing files displayed by serve-index in Express

My Node.js server using Express seems to be working fine for displaying directory contents, but I'm running into an issue when trying to access individual files. After clicking on a file listed in the directory, I keep getting an error message that sa ...

javascript/typescript - conditionally adding an item to an object

If I have an object called userData = {..} and I need to create another object, userDataB, with properties a, b, c, and d from userData but only if they are defined. One way to achieve this is by using the following approach: userDataB = {} if(userData.a ...

Issue with Node.js express-session not retrieving myvar value (or generating a different sessionID)

After experimenting with express-session, I encountered an issue where I couldn't access any of my previously stored variables in the session. Additionally, I noticed that the session ID had changed. Can anyone explain why this is happening? This is ...

Executing HTTP Requests for Elements in an Array using JavaScript

I am currently struggling with a script that sends HTTP requests to a website in order to obtain various documents. The document IDs are stored within an array, and my intention is to send a request for each element in the array and return a unique message ...

Discover how to sum all the elements at a specific index within a JavaScript array using Vue.js

I am working on a project where I have created an array of products to display using VueJS. Each time a user selects a product, it is added to a list and the "Count" value increments. The "Total Price" for each product is calculated by multiplying the "C ...

Display loading images using the Bxslider plugin

Currently, I have implemented a Bxslider on my website with the following HTML markup: <div class="slide"> <a target="_blank" href="#"><img src="image.jpg"/></a> </div> <div class="slide"> <a target="_blank" href= ...

Creating a Javascript countdown timer that does not involve displaying the

I stumbled upon this code on a website, but there's one tweak I'd like to make. Unfortunately, I can't seem to figure it out myself, so I'm reaching out for some help. What I want to achieve is removing the year from the date so that th ...

Updating the style of a div in ReactJS with instant changes

Currently working on a project where I need to create a self-centering, self-sizing content editable div. The text is centered and the width is already set to 100% of the parent container; my main concern now is the height. I have implemented a function t ...

Having trouble retrieving input values from forms in Angular 2?

Currently, I am using a modal form that loads information about my items when it is open. However, when I try to submit, all inputs are null except when the modal displays which works fine. <div id="modal1" class="modal"> <form #formData=' ...