[Vuejs]-JQuery chosen Dynamic ajax call option duplication issue, If use empty() element then lose default selected value

by

0👍

✅

This question has solved this code is working for me.

var self = this;
        // var ids=[]
        $(this.el).ready(function(){
            setTimeout(function(){
                $(self.el).chosen({
                    width: '100%',
                    allow_single_deselect: true,
                    no_results_text: "Oops, nothing found!",
                    search_contains: false,
                    max_selected_options: self.params.maxselected ? self.params.maxselected : 0
                }).on('change', function(evt, params) {

                    var value = $(self.el).val();
                    // ids = $(self.el).val();
                    self.set(value);
                    console.log("value",value);
                }).on('chosen:showing_dropdown', function(evt, params) {
                })
                
                $('#patient_diagnosis_chosen ul li.search-field input').autocomplete({
                    source: function( request, response ) {
                            if(request.term.length >= self.params.minlength){
                            $.ajax({
                                url: baseURL+'api/service/v1/get-data',
                                dataType: "json",
                                method:'post',
                                data:{
                                    'ids':$(self.el).val(),
                                    'key':request.term
                                },
                                success: function( data ) {
                                    var subItems=[]
                                    var ids=$(self.el).val()
                                    data.input_data.forEach((item,index)=>{
                                        subItems.push( "<option  value="+item.id+">"+ item.code +' - '+item.short_description  + "</option>" );
                                    })
                                    $(self.el).empty().append(subItems).trigger("chosen:updated");
                                    var test = $.trim(ids);
                                    var testArray = test.split(',');
                                    $(self.el).val(testArray).trigger("chosen:updated");
                                }
                            });
                        }
                    }
                }); 
            },100); 
            
        });

When call the ajax with selected values and it’s give the response then empty the element and and again set the selected value in chosen

Api response is with seleced values

Leave a comment