Autocomplete / Suggestions when creating new row

tnaescher

Hello everyone

I have a general question.

What's the easiest way to allow "autocompleting" when creating a new row?

For example: Table contains 5 rows, one column "manufacturer". 3 rows contain "bmw", 2 rows "ford".
Now the user creates a new row - in the dialogue he types "b" and the editor interface suggests "bmw", like google search or http://www.enjoyxstudy.com/javascript/suggest/demo.en/demo1.html.

Is there a premade extension i didn't notice? Or what is the preferred way to do this?

Best Regards
Timothy

Edit: Why would it be useful? There are Usecases where a Select-dropdown is unsuitable because there are too many available options and/or they change constantly - but it would still be nice to have consistent data (Imagine a Column called „Companies“ - „Google“ „Google LLC“ ….)

tnaescher

https://editor.datatables.net/plug-ins/field-type/editor.autoComplete

Should have searched more thoroughly

allan

That's the one - good to hear you found it. You might also want to consider using Select2 - personally I fund jQuery UI's auto complete really hard to use when working with linked tables (i.e. different labels and values) - if you are doing that.

Allan

tnaescher

I considered Select2, but i believe it is not
possible to allow users to add options?

allan

It does make things more complicated, but it is possible. Our datatable field input might be another option to consider as well.

It really depends on what you need - are you doing a left join to a linked table, or is it just a list of text tags you have?

Allan

tnaescher

The Datatable-Field seems very "overkill" for just adding another text option.

When i tried Select2, i just used a SQL View ("SELECT DISTINCT xxx FROM xxx") with ->table(...) as the source of the options (label=value).

However, i encounter the same bug as https://datatables.net/forums/discussion/42361/select2-in-editor-loads-option-instead-of-placeholder - when i press "new" for the first time, it shows the first option, when i close it and press "new" again it shows the placeholder correctly. Issue only happens on Safari, not on Chrome ...

As i don't have enough time to debug this right now i will stick to jQuery autocomplete for now.

If you find the time, what do you think about adding simple native autocomplete support to DataTables Editor? Think about CloudTables too, it surely could use the additional Field Type.
If you accept, I'll get a grande supporter package to help you out a bit

Best Regards
Timothy

allan

Its something I've thought about a whole lot of times. The main thing that is stopping me from doing it is that I much prefer the use of linked / joined tables for this sort of data over ah hoc text.

For example, consider you have text tags and you enter "Edinbrgh" rather than "Edinburgh" for the first text field. You might then add a few more like it using Auto Complete, then notice the typo. You'd need to change all of them now rather than just one using a linked table.

Perhaps using a linked table in combination with auto complete would be the way forward via a custom control (as I mentioned - using jQuery UI AutoComplete for this can get hairy). When I've looking into this in the past I though <datalist> was going to be the answer to all the problems, but it has much the same issue as jQuery UI AutoComplete.

In short, I don't have an immediate plan for this, but it is something that I am actively thinking about how to resolve and get into the software

Allan

allan

I've been thinking about this some more. While doing a label / value pair doesn't work with datalist, doing a simple auto complete does. It doesn't offer referential integrity for joined tables, but perhaps that isn't going to be an issue for you?

I've knocked together a quick example here: http://live.datatables.net/jorutoji/44/edit . The Position field will auto complete based on the list of options.

Allan

tnaescher

Hey Allan

"You'd need to change all of them now rather than just one using a linked table" AutoFill resolves issues like that quickly.
I agree with the issues you mention, but sometimes it just isn't worth the hassle of setting up a second table. The DataTable-Field-Type goes in the same direction - but imho it just uses way too much space in the edit-window (again, this is only an issue for trivial usecases such as mine in this case - when working with more "important" datasets, the datatable-field-type is awesome!)

Datalist: I have not been aware of this, let alone that this exists in raw HTML
However, i tried to adapt your example to use the PHP libraries (source of the options), but didn't get it to work. Would an easy way to pass those options (like for a standard select-field) - be hard to implement? Like, a new Field-type (plugin)? That renders <datalist> instead of <select>.

For now, i'll get by with the jquery solution. It's just amazing that whatever CRUD need you have, with Datatables (Editor) it just works out somehow in the end

Thanks a lot for your help!

allan

Yes, I was wondering about putting this into Editor 2.1 and having it update from the JSON data automatically. At the moment you would need to use initComplete or xhr to listen for the JSON data being updated and then populate the dataset from that.

Allan

tnaescher

Well, yes, that would be possible. Probably not even complex? After getting the data from the table with unique() in the initComplete, all that would have to be done is iterate and add the option with JS/jQuery. Will try in the weekend.

Thanks!