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

Question

$(this.el).ready(function(){
            setTimeout(function(){
                var subItemsData = [];
                $(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();
                    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=[]
                                    data.input_data.forEach((item,index)=>{
                                        
                                        subItems.push( "<option value="+item.id+">"+ item.code +' - '+item.short_description  + "</option>" );
                                        subItemsData.push(item) 
                                    })
                                    
                                    $(self.el).append(subItems).trigger("chosen:updated");
                                }
                            });
                        }
                    }
                }); 
                
            },100);     
        });

This code able to call api and get api response, But issue is option are duplication If I use

$(self.el).empty().append(subItems).trigger("chosen:updated");

then lose default select value

If It is posible to empty the element and set the default element.

Answer 1

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