JQuery Chosen autocomplete issue

Question

I have a list of product (about 18000) so I like to load some of them with the autocomplete when user tape S I have item contain S

here is my code

 <div class="chzn-panel">
                                <select id="nomenclature_pv_recherche" name="nomenclature_pv_recherche" data-placeholder="<?php echo  JText::_('COM_TKTRANSIT_DOSSIER_PV_NOMENCLATURE'); ?>" class="chzn-select-deselect"  style="width: 256px;">
                                    <?php 
                                        //echo JHtml::_('select.options', TkTransitHelper::getOptionsWithFieldName('nomenclature',"code",JText::_('COM_TKTRANSIT_DOSSIER_PV_NOMENCLATURE_OPTION')),'value', 'text', '');
                                        //echo JHtml::_('select.options', array(),'value', 'text', '');  
                                    ?>
                                    <option value="">- Select Option -</option>
                                </select>
                            </div>
                            <script type="text/javascript"> 
                                $("#nomenclature_pv_recherche").chosen({allow_single_deselect:true}); 
                            </script>

and for Javascript I have this

$("#nomenclature_pv_recherche").chosen();
        $('#nomenclature_pv_recherche input').autocomplete({
            source: function( request, response )
            {
                alert(request);
                alert(response);
                $.ajax({
                    url:  'index.php?option=com_tktransit&task=privileges_fiscaux.getNomenclatureWithString',
                    data: {nomenclature:request.term},
                    dataType: "json",
                    success: function( data )
                    {
                        $('#nomenclature_pv_recherche').empty();
                        response( $.map( data, function( item )
                        {
                            $('#nomenclature_pv_recherche').append('<option value="'+item.id+'">' + item.code + '</option>');

                        }));
                        $("#nomenclature_pv_recherche").trigger("chosen:updated");
                    }
                });
            }
        });

I don't know why I have no alert, no Ajax applet

What's wrong?

Jquery 3.5.1 JqueryUI 1.12.1 chosen 1.8.7 Thank you

Answer 1

$("#tags")
// don't navigate away from the field on tab when selecting an item
.on("keydown", function(event) {
    if (event.keyCode === $.ui.keyCode.TAB &&
        $(this).autocomplete("instance").menu.active) {
        event.preventDefault();
    }
})
.autocomplete({
    minLength: 0,
    source: function(request, response) {
        // delegate back to autocomplete, but extract the last term
        response($.ui.autocomplete.filter(
            availableTags, extractLast(request.term)));
    },
    focus: function() {
        // prevent value inserted on focus
        return false;
    },
    select: function(event, ui) {
        var terms = split(this.value);
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push(ui.item.value);
        // add placeholder to get the comma-and-space at the end
        terms.push("");
        this.value = terms.join(", ");
        return false;
    }
});

You can see DEMO