I would like to have two searchable dropdowns which are linked to two different modals (Dog & Service). The first dropdown for the products (services modal) works fine (expect, that i dont have a preview), but the second dropdown which should be linked the to the dog modal doesn’t work as expected.

The searchfunction only shows results which are in the other modal (service). However if I select one of the results, the actual selection in the dropdown equals the value from the correct dog modal.

I already tried to find the same problem online, but could not.

.html

<!-- Searchbox_dog linked to Dog Modal -->
                                <form method='post' action='' class="mb-3"></form>
                                    <label for="dog" class="form-label">Dog:</label>
                                    <select class="form-select select2" name="searchbox_dog" id="searchbox_dog">
                                        {% for dog in dogs %}
                                            <option value='{{dog.id}}'>{{ dog.dog_name }}</option>
                                        {% endfor %}
                                    </select>
                                </form>

<!-- Searchbox_service linked to Service Modal -->
                        <form method='post' action='' class="mb-3">
                            <label class="mb-1">Search service:</label>
                            <select class="form-select select2" name="searchbox_service" id="searchbox_service">
                                {% for service in services %}
                                    <option value='{{service.id}}'>{{ service.name }}</option>
                                {% endfor %}
                            </select>
                        </form>

javascript

 let csrftoken = '{{ csrf_token }}'

        $('#searchbox_dog').select2({
            dealy: 250,
            placeholder: 'Search dog',
            minimumInputLength: 1,
            allowClear: true,
            templateResult: template_dog_searchbox,
            ajax:{ 
                type: "POST",
                headers:{'X-CSRFToken':csrftoken},
                url: "{% url 'get_dogs' %}",
                data: function (params) {
                var queryParameters = {
                    term: params.term,
                }
                return queryParameters;
                },
                processResults: function (data) {
                    console.log(data)
                    return {
                        results: data
                    };
                },
            }
            });


        $('#searchbox_service').select2({
            delay: 250,
            placeholder: 'Search a product',
            minimumInputLength: 1,
            allowClear: true,
            templateResult: template_product_searchbox,
            ajax:{ 
                type: "POST",
                headers:{'X-CSRFToken':csrftoken},
                url: "{% url 'get_products' %}",
                data: function (params) {
                var queryParameters = {
                    term: params.term,
                }
                console.log('Test service');
                console.log(queryParameters);
                return queryParameters;
                },
                processResults: function (data) {
                    console.log(data)
                    return {
                        results: data
                    };
                },
            }
            })
            // .on('select2:select', function (e) {
            //     //When a product is selected from the searchbox
            //     var data = e.params.data;
            //     //Add number, subtotal and quantity of the product to the dictionary
            //     data.number = number;
            //     number++; //Increase the product number in the table
            //     data.sub_total = 0;
            //     data.quantity = 1;
            //     //Add the product to the sale object
            //     sale.add_service(data);
                      
            //     //Clean the searchbox after the product is selected
            //     $(this).val('').trigger('change.select2');
            // });
       
    });

        // Dog searchbox templateResult
        function template_dog_searchbox(repo) {
            if (repo.loading) {
                return repo.dog;
            }
        
            var option = $(
                '<div class="wrapper container">'+
                ' <div class="row">' +
                    '<div class="col-lg-11 text-left shadow-sm">' +
                      '<p style="margin-bottom: 5px;">' +
                       repo.dog + " | Owner: " + "<span class='btn-success px-2'>" + repo.owner + '</span>' +   
                    '</div>' +
                  '</div>' +
                '</div>');

            return option;
        }

        // Product searchbox templateResult
        function template_product_searchbox(repo) {
            if (repo.loading) {
                return repo.text;
            }
        
            var option = $(
                '<div class="wrapper container">'+
                ' <div class="row">' +
                    '<div class="col-lg-11 text-left shadow-sm">' +
                      '<p style="margin-bottom: 5px;">' +
                       repo.text + " | Price: " + "<span class='btn-success px-2'>" + repo.cost + ' AED. </span>' +   
                    '</div>' +
                  '</div>' +
                '</div>');

            return option;
        }

urls.py

# Get products AJAX
path("get", views.get_products_ajax_view, name="get_products"),
# Get dogs AJAX
path("get", views.get_dogs_ajax_view, name="get_dogs"),

views.py

def is_ajax(request):
    return request.META.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest'

def get_products_ajax_view(request):
    if request.method == 'POST':
        if is_ajax(request=request):
            data = []

            products = Service.objects.filter(
                name__icontains=request.POST['term'])
            for product in products:
                item = product.to_json()
                data.append(item)

            return JsonResponse(data, safe=False)
        

def get_dogs_ajax_view(request):
    if request.method == 'POST':
        if is_ajax(request=request):
            data = []

            dogs = Dog.objects.filter(
                name__icontains=request.POST['term'])
            for dog in dogs:
                item = dog.to_json()
                data.append(item)

            return JsonResponse(data, safe=False)