JQuery Autocomplete Search in DataTables Modal

raspoteen

Hi, I want to add Autocomplete search in Modal, I used this code and it's working fine on the pages fields, but it Never working in the DataTables Modal, what is problem ??
Note// the backend is Laravel

the code bellow in header

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

and the code bellow in footer

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script>

        var editor; // use a global for the submit and return data rendering in the examples
        $(document).ready(function () {
            editor = new $.fn.dataTable.Editor({
                ajax: {
                    url: 'cart_getter',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                },
                table: "#table_id",
                idSrc: "id",
                fields: [{
                    label: "Search",
                    name: "search",
                    id: "search",
            },{
                    label: "Product Name:",
                    name: "product_name",
                }, {
                    label: "Quantity:",
                    name: "quantity"
                }, {
                    label: "Buy Price:",
                    name: "buy_price",
                    type: "readonly",
                },{
                    label: "Buy Currency:",
                    name: "buy_currency",
                    type: 'readonly',
                    options: [{label: "Dollar ($)", value: "1"}, {label: "Iraqi Dinar (IQD)", value: "0"}]
                }, {
                    label: "Sell Price:",
                    name: "sell_price"
                },{
                    label: "Sell Currency:",
                    name: "sell_currency",
                    type: 'select',
                    options: [{label: "Dollar ($)", value: "1"}, {label: "Iraqi Dinar (IQD)", value: "0"}]
                },

                ]
            });


            $('#table_id').DataTable({
                dom: "Bfrtip",
                ajax: "cart_getter",
                columns: [
                    {data: "product_name"},
                    {data: "quantity"},

                    // Check Buy Currency Dollar or Dinar
                    {data: "buy_price",
                        render: function(data, type, row){
                            return (row.buy_currency == '1')
                                ? $.fn.dataTable.render.number( ',', '.', 0, '$' ).display(data)
                                : $.fn.dataTable.render.number( ',', '.', 0 ).display(data)}},

                    // Check Sell Currency Dollar or Dinar
                    {data: "sell_price",
                        render: function(data, type, row){
                            return (row.sell_currency == '1')
                                ? $.fn.dataTable.render.number( ',', '.', 0, '$' ).display(data)
                                : $.fn.dataTable.render.number( ',', '.', 0 ).display(data)}},

                    {data: "category_rel.category_name"},
                    {data: "company"},
                ],

                select: true,
                searching: false,
                buttons: [
                    {
                        extend: "create",
                        text: '<i class="fa fa-plus" aria-hidden="true"> New</i>',
                        editor: editor,
                        className: 'btn btn-success'
                    },

                    {
                        extend: "edit",
                        text: '<i class="fa fa-pencil" aria-hidden="true"> Edit</i>',
                        editor: editor,
                        className: 'btn btn-warning'
                    },

                    {
                        extend: "remove",
                        text: '<i class="fa fa-trash" aria-hidden="true"> Delete Item</i>',
                        editor: editor,
                        className: 'btn btn-danger'
                    },
                    {
                      text: '<i href="Orders/create"> Clear All</i>',
                        className: 'btn btn-danger',
                    },
                ]
            });
        });


    </script>

    <script>
        $(function() {
            var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp",
                "BASIC",
                "C",
                "C++",
                "Clojure",
                "COBOL",
                "ColdFusion",
                "Erlang",
                "Fortran",
                "Groovy",
                "Haskell",
                "Java",
                "JavaScript",
                "Lisp",
                "Perl",
                "PHP",
                "Python",
                "Ruby",
                "Scala",
                "Scheme"
            ];

            $(document).on('keydown.autocomplete', '#search',function(){
                $(this).autocomplete({source:availableTags});
                console.log('fuck');
            });
        });
    </script>