Datatables Editor and Jquery UI Autocomplete

menashe

I have successfully implemented jQuery UI Autocomplete in an Editor. I get the expected values and am able to choose.

However, I am CLUELESS (and have wasted "day") trying to figure out how the return value from autocomplete is propagated in order to save in my server side ajax call.

I have looked at the various discussion threads that relate to autocomplete.

allan

Are you tied to jQuery UI AutoComplete? Personally I really don't like it because of how difficult it is to separate labels from values. If you just have an array of values which are also labels, then its fine, but if you are looking for more of a regular <select> replacement, I'd use Select2.

However, I am CLUELESS (and have wasted "day") trying to figure out how the return value from autocomplete is propagated in order to save in my server side ajax call.

When you select a value from the AutoComplete dropdown it should populate that into the input element. Does that not happen? That is then used as the value to submit when the Editor form is submitted.

Allan

menashe

Allan,

Thank for the response.

"Tied" to it? No! I was literally sitting here at my computer looking up Select2 when I saw your response!

With jQuery UI Autocomplete:

I select and it DOES populate the input. I think I'm just stumped on this--how do I get this value that is (as you said) "then used as the value to submit when the Editor form is submitted."?

I am able to "pick up" the label, but I do not see how to populate the foreign key with the value?

(I am assuming that the same issue will apply in Select2?)

allan

-how do I get this value that is (as you said) "then used as the value to submit when the Editor form is submitted."?

When it is in the input field, that's the value set. You then press submit and it would submit like like a text field in Editor.

I am able to "pick up" the label, but I do not see how to populate the foreign key with the value?

If you are using a different label from the value, I'd move away from jQuery UI AutomComplete (assuming you have the option to do that) and use Select2.

I'd also suggest starting with a simple select such as in this example and then adding Select2 on top of that.

Allan

menashe

Hi Allen,

Getting there--I believe!

This is (I believe) the relevant part of my field definition:

                       type: 'select2',
                        opts: {
                            multiple: false,
                            placeholder: 'Select a Manufacturer...',
                            ajax: {
                                dataType: "json",
                                url: 'server_side/scripts/manufacturers.php',
                                data: function(params) {
                                    var query = {
                                        manufacturer: params.term,
                                        // type: 'public'
                                    }
                                    // Query parameters will be ?search=[term]&type=public
                                    return query;
                                },
                                serverSide: true,
                                type: "post",
                                processResults: function(obj) {
                                    // Transforms the top-level key of the response object from 'items' to 'results'
                                    let resultsMapped = $.map(obj.data, function(d) {
                                        return {
                                            id: d.id,
                                            text: d.text
                                        }
                                    });
                                    return {
                                        results: resultsMapped
                                    };
                                },
                            },
                       }

You'll notice that I return the "id" and the "text". The Select2 values display properly.

Now, when I choose a value from the Select2, I need the corresponding "id: to update the "manufacturer_id" below in the request being sent back to the server. This is what I am missing!!

{
    "data": [
        {
            "DT_RowId": "row_162",
            "packaging": {
                "id": 162,
                "item_id": 272,
**                "manufacturer_id": 53,
**                "brand_id": 115,
                "outer_packages": 1,
                "inner_packages": 1,
                "inner_items": 2,
                "unit_quantity": "16.00",
                "unit_id": 3,
                "upc_ean": "300650363785",
                "prefix": "",
                "suffix": ""
            },
            "items": {
                "item": "3% Hydrogen Peroxide Cleaning & Disinfecting Solution"
            },
            "manufacturers": {
                "id": 53,
                "manufacturer": "Alcon Laboratories, Inc."
            },
            "brands": {
                "id": 115,
                "brand": "Clear Care Plus"
            },
            "units": {
                "unit": "oz",
                "description": "ounce"
            }
        }
    ],
    "options": {
...
    },
    "files": [],
    "draw": 2,
    "recordsTotal": 1,
    "recordsFiltered": 1
}

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

menashe

Allan,

I figured it out!

Select2 is definitely simpler than jQuery UI Autocomplete.

The issue: In spinning my wheels for almost a week trying to make sense of autocomplete, I commented this out and that out... repeatedly. When I restored a critical one-line function--it works!

Thank you for your help! I absolutely love your product!

allan

Brilliant - delighted to hear you managed to get it working .

And yes, Select2 is a serious level up from jQuery UI AutoComplete... I should perhaps put a warning on the AutoComplete page.

Allan