AutoComplete AutoFocus Select 1st suggestion Select 1st Dropdown

aungkohein

Hi @allan / @colin

In inline Editor, I managed to use autocomplete. It shows suggestion when keys are entered. My user would like to press on TAB and also click out of the cell, to submit the top suggestion (1st row autocomplete). Even if he entered e.g "A" and sugguestion shows "Apple, Ape, etc", Apple will be autofilled and submitted into database.

I have found autocomplete with autofocus solutions but could not make it work with Datatables.

Something like this for AutoComplete:
https://codepen.io/anon/pen/rVJyRO

http://api.jqueryui.com/autocomplete/#option-autoFocus

What syntax should I use?

kthorngren

If you want help with your autocomplete solution then I would recommend building a simple test case to allow us to help.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

My suggestion would be to use one of the Field Type Plugins provided. I use Select2. With Select2 you can set the selectOnClose option to true for this behavior. I found this simple example. You can change the selectOnClose value to see the behavior differences:
https://jsfiddle.net/frpvdakn/

Kevin

aungkohein

Hi @kthorngren,

Thank you for the reply. I'm not using Select2 as I'm using Datatables Editor. User is using it like an excel; hence there is not select dropdown. Thus, I'm using Autocomplete only.

tables.abc.js:

            "label": "Status:",
            "name": "status",
            "type": "autoComplete",
            "opts": {
                "source": [
            "Pending",
                        "Open",
                        "Closed"                            
                    ]
            }

.
.
. // Status -18
{
"data": "status",
"className": "dt-body-center"
},

any idea to work with it?

allan

I think the first thing to do here would be to attempt want you want (select the top entry when pressing tab) with a plain input element - no Editor, no DataTables or anything else. You'd need to check the jQuery UI documentation to see if that is even possible, as I'm afraid I don't know the ins and outs of that library particularly well.

Allan

aungkohein

Hi @allan,

There is this built-in function called autoFocus: true.
http://api.jqueryui.com/autocomplete/#option-autoFocus

I tried to change js link to jquery-ui.js and turn the autoFocus: true, but it does not work with inline Editor. How should I implement or change codes in existing dataTables JS?

Currently linked to:

<script src="../assets/js/jQueryUI-1.12.1/jquery-ui.js"></script>

<!-- Auto Complete -->
<script type="text/javascript" charset="utf-8" src="js/editor.autoComplete.js"></script>

aungkohein

Hi @allan!

It's solved! I have carelessly linked to old jquery-ui,js while editing on the new one.

I re-downloaded the jquery Ui and link to the new JS > changed autoFous: to true.

Thanks again for the wonderful support!