citrus-cms/app/Functions/devextreme-base-autocomplete.php

<?php

function onPreparingVariables() {
    ?>
    var options = e.editorOptions;
    var rowIndex = e.row.rowIndex;
    var rowData = e.row.data;
    var dataGrid = $("#dataGrid").dxDataGrid("instance");
    var exceptValue = ['undefined', 'null'];
    var column = e.dataField;
    var urlRowData = encodeURIComponent(JSON.stringify(rowData));
    <?php
}

function dxAutocomplete($columnName, $tableName, $targetColumn, $filter = "", $affected = "") {
    if ($filter != "") {
        $filter2 = [];
        foreach ($filter as $filterColumn => $filterValue) {
            if (is_array($filterValue)) {
                $filter2[$filterColumn] = implode(",", $filterValue);
            } elseif (strpos($filterValue, '"') !== false) {
                $filterValue = str_replace('"', "", $filterValue);
                $filter2[$filterColumn] = "{$filterValue}";
            } else {
                $filter2[$filterColumn] = "'+ dataRow.{$filterValue} +'";
            }
        }
        $filter = "&filter=" . json_encode_tr($filter2);
    }
    ?>
    <?php if ($affected == "") { ?>
    if (e.dataField == "<?php echo $columnName ?>") {
        e.editorName = "dxAutocomplete";
        e.editorOptions.searchEnabled = true;
        e.editorOptions.acceptCustomValue = true;
        e.editorOptions.dataSource = new DevExpress.data.ODataStore({
            url: '<?php echo autocomplete_url($tableName, $targetColumn) ?><?php echo $filter ?>',
            key: 'id',
        });
        e.editorOptions.valueExpr = '<?php echo $targetColumn ?>';
        e.editorOptions.displayExpr = '<?php echo $targetColumn ?>';
    }
    <?php } else { ?>
    var options = e.editorOptions;
    var rowIndex = e.row.rowIndex;
    var dataGrid = $("#dataGrid").dxDataGrid("instance");
    var exceptValue = ['undefined', 'null'];

    if (e.dataField == "<?php echo $columnName ?>") {
        e.editorName = "dxAutocomplete";
        e.editorOptions.searchEnabled = true;
        e.editorOptions.acceptCustomValue = true;
        e.editorOptions.showClearButton = true;
        e.editorOptions.dataSource = new DevExpress.data.ODataStore({
            url: '<?php echo autocomplete_url($tableName, $targetColumn) ?><?php echo $filter ?>',
            key: 'id',
        });
        e.editorOptions.valueExpr = '<?php echo $targetColumn ?>';
        e.editorOptions.displayExpr = '<?php echo $targetColumn ?>';

        var fetchRelatedData = function(typedValue) {
            if (typedValue === null || typedValue === '') {
                return;
            }

            $.getJSON("<?php echo row_detail_url($tableName, $targetColumn) ?>?value=" + typedValue, function(responseJSON) {
                console.log(responseJSON);
                if (responseJSON && typeof responseJSON.<?php echo $targetColumn ?> !== 'undefined') {
                    <?php
                    $affectedCols = $affected;
                    foreach ($affectedCols as $affectedCol => $valueCol) {
                        $valueCol = str_replace('{', '${responseJSON.', $valueCol); ?>
                    if (!exceptValue.includes(`<?php echo $valueCol ?>`)) {
                        dataGrid.cellValue(rowIndex, "<?php echo $affectedCol ?>", `<?php echo $valueCol ?>`);
                    } else {
                        console.log("except value <?php echo $valueCol ?>");
                    }
                    <?php } ?>
                } else {
                    console.log("undefined <?php echo $targetColumn ?>");
                }
            });
        };

        options.onValueChanged = function(selectData) {
            console.log("on value changed");
            e.setValue(selectData.value);

            if (options.__stellarExactMatchTimer) {
                clearTimeout(options.__stellarExactMatchTimer);
            }

            options.__stellarExactMatchTimer = setTimeout(function() {
                var typedValue = (selectData && typeof selectData.value !== 'undefined') ? selectData.value : null;
                fetchRelatedData(typedValue);
            }, 250);
        }

        options.onSelectionChanged = function(eSelection) {
            if (eSelection.selectedItem) {
                if (options.__stellarExactMatchTimer) {
                    clearTimeout(options.__stellarExactMatchTimer);
                }
                // Use the value directly from the selected item
                var selectedValue = eSelection.selectedItem['<?php echo $targetColumn ?>'];
                fetchRelatedData(selectedValue);
            }
        }
    }
    <?php } ?>
    <?php
}

function dxSelectBox($columnName, $tableName, $targetColumn, $filter = "", $affected = "", $order = "") {
    if ($filter != "") {
        $filter2 = [];
        foreach ($filter as $filterColumn => $filterValue) {
            if (is_array($filterValue)) {
                $filter2[$filterColumn] = implode(",", $filterValue);
            } elseif (strpos($filterValue, '"') !== false) {
                $filterValue = str_replace('"', "", $filterValue);
                $filter2[$filterColumn] = "{$filterValue}";
            } else {
                $filter2[$filterColumn] = "'+ dataRow.{$filterValue} +'";
            }
        }
        $filter = "&filter=" . json_encode_tr($filter2);
    }
    ?>
    <?php if ($affected == "") { ?>
    if (e.dataField == "<?php echo $columnName ?>") {
        e.editorName = "dxSelectBox";
        e.editorOptions.searchEnabled = true;
        e.editorOptions.acceptCustomValue = true;
        e.editorOptions.allowCustomValues = true;
        e.editorOptions.dataSource = new DevExpress.data.ODataStore({
            url: '<?php echo autocomplete_url($tableName, $targetColumn) ?><?php echo $filter ?>',
            key: 'id',
        });
        e.editorOptions.valueExpr = '<?php echo $targetColumn ?>';
        e.editorOptions.displayExpr = '<?php echo $targetColumn ?>';
    }
    <?php } else { ?>
    var options = e.editorOptions;
    var rowIndex = e.row.rowIndex;
    var dataGrid = $("#dataGrid").dxDataGrid("instance");
    var exceptValue = ['undefined', 'null'];

    if (e.dataField == "<?php echo $columnName ?>") {
        e.editorName = "dxSelectBox";
        e.editorOptions.searchEnabled = true;
        e.editorOptions.acceptCustomValue = true;
        e.editorOptions.allowCustomValues = true;
        e.editorOptions.showClearButton = true;
        e.editorOptions.dataSource = new DevExpress.data.ODataStore({
            url: '<?php echo autocomplete_url($tableName, $targetColumn) ?><?php echo $filter ?>',
            key: 'id',
        });
        e.editorOptions.valueExpr = '<?php echo $targetColumn ?>';
        e.editorOptions.displayExpr = '<?php echo $targetColumn ?>';

        options.onValueChanged = function(selectData) {
            e.setValue(selectData.value);

            if (options.__stellarExactMatchTimer) {
                clearTimeout(options.__stellarExactMatchTimer);
            }

            options.__stellarExactMatchTimer = setTimeout(function() {
                var typedValue = (selectData && typeof selectData.value !== 'undefined') ? selectData.value : null;
                if (typedValue === null || typedValue === '') {
                    return;
                }

                $.getJSON("<?php echo row_detail_url($tableName, $targetColumn) ?>?order=<?php echo $order ?>&nolike=1&value=" + encodeURIComponent(typedValue), function(responseJSON) {
                    console.log(responseJSON);
                    if (responseJSON && typeof responseJSON.<?php echo $targetColumn ?> !== 'undefined') {
                        <?php
                        $affectedCols = $affected;
                        foreach ($affectedCols as $affectedCol => $valueCol) {
                            $valueCol = str_replace('{', '${responseJSON.', $valueCol); ?>
                        if (!exceptValue.includes(`<?php echo $valueCol ?>`)) {
                            dataGrid.cellValue(rowIndex, "<?php echo $affectedCol ?>", `<?php echo $valueCol ?>`);
                        } else {
                            console.log("except value <?php echo $valueCol ?>");
                        }
                        <?php } ?>
                    } else {
                        console.log("undefined <?php echo $targetColumn ?>");
                    }
                });
            }, 250);
        }
    }
    <?php } ?>
    <?php
}
?>