Editor autocomplete return values

klingler

Good afternoon (o;

As my project already uses autocomplete from jqueryui I give it a go as well with the editor..
But I am stuck what to exactly return from the ajax call.

Got this framework I've found here:

            label: "Artikelnummer",
            name: "Artikelnummer",
            type : "autoComplete",
            minLength: 2,
            opts: {
            source: function (query, result) {
                        $.ajax( {
                            url: '/inc/get.products.php',
                            dataType: 'json',
                            success: function ( data ) {
                                result ( $.map( data,    function (item) {
                                    console.log(data.data);
                                    return {
                                        label: data.data.number, << no clue yet (o;
                                        value: data.data.number << no clue yet (o;
                                    };
                                }
                            )
                            )
                        }
                    });
            }
            }

The PHP code just returns an array with all products availabe, and the editor autocomplete should fill then two fields automatically when selected...

So my simple question..what exactly do I have to return in the ajax call to autocomplete so it displays the product list matching they typed input?

I'm not that JS guru (o;

thanks in advace
richard

allan

Hi Richard,

It should work the same was as your other jQuery UI AutoComplete implementations. Looking at the jQuery UI remote data source example they return:

[{
    "id": "Netta rufina",
    "label": "Red-crested Pochard",
    "value": "Red-crested Pochard"
}, {
...
}]

with no neext to make your own Ajax request - just using source: "/inc/get.products.php", should do it.

I don't really use jQuery UI much myself I'm afraid, so I'm not all that familiar with its options. I found the AutoComplete really difficult to use when you want the label and value to be different.

Allan

klingler

Okay...works with directly supplying the AJAX source (o;

How can I then split the selected item in two editor fields?

Let's say one field is the article number where I can look through autocomplete...
and another editor field contains the product description.

Can I trigger somehow to update the description editor field as well at the same time?

allan

How can I then split the selected item in two editor fields?

Use dependent() on the host field (i.e. the one where the auto complete is enabled). When that field changes value the dependent function will trigger giving you the chance to manipulate the form in some way.

The other option would be to bind to the change event directly from jQuery UI's autocomplete.

Regards,
Allan

klingler

Hmm.something must be wrong...

autocomplete returns always the whole list when input is >= minLength...

Did I miss something?

            label: "Artikelnummer",
            name: "Artikelnummer",
            type : "autoComplete",
            opts: {
                    source: 'inc/get.products2.php',
                    minLength: 3
                },

allan

As far as I understand the jQuery UI AutoComplete library, minLength is for the minimum number of characters needed for input before the list is displayed. Their documentation confirms that:

The minimum number of characters a user must type before a search is performed.

As I understand it, if you want to limit the number of entries, your PHP script should do that. But that would be something to confirm with the jQuery UI support channels.

Allan

klingler

Hmm...I thought autocomplete would show and limit the list based on the minimum 3 chars entered...not showing all...

Well...not that important at the moment in my project (o;