How to use jQuery UI AutoComplete
How to use jQuery UI AutoComplete
dynasoft
Posts: 446Questions: 69Answers: 3
Hi
I'm trying to use the above extension but keep getting a simple text box in lieu of JQuery's combobox. Also, where do I put the js code given on https://editor.datatables.net/plug-ins/field-type/editor.autoComplete, after the creation of the datatable, 'var dataTable = $('#tblDataTable').DataTable( {' which for me is inside '$(document).ready(function () {'? Many thanks.
Here's my code:
$(document).ready(function () {
var editor = new $.fn.dataTable.Editor({
ajax: {
...
},
table: '#tblDataTable',
fields: [ {
label: '@(lblo.lblNumber)*:', //*HERE*
name: 'FNFNumber',
type: 'autoComplete',
opts: {
"source": [
'Item 1', 'Item 2', 'Items 3'
],
},
}
],
i18n: {
error: {
system: '@(lblo.lblError5)'
}
}
});
var dataTable = $('#tblDataTable').DataTable( {
order: [[0, 'desc']],
dom: 'Bfrtip',
ajax: {
...
},
columns: [
{ data: 'FNFNumber' ,
className: 'text-left'
}
],
select: true,
buttons: [
{ extend: 'create', editor: editor },
{ extend: 'edit', editor: editor },
{ extend: 'remove', editor: editor }
]
});
(function ($, DataTable) {
if ( ! DataTable.ext.editorFields ) {
DataTable.ext.editorFields = {};
}
var _fieldTypes = DataTable.Editor ?
DataTable.Editor.fieldTypes :
DataTable.ext.editorFields;
_fieldTypes.autoComplete = {
create: function ( conf ) {
conf._input = $('<input type="text" id="'+conf.id+'">')
.autocomplete( conf.opts || {} );
return conf._input[0];
},
get: function ( conf ) {
return conf._input.val();
},
set: function ( conf, val ) {
conf._input.val( val );
},
enable: function ( conf ) {
conf._input.autocomplete( 'enable' );
},
disable: function ( conf ) {
conf._input.autocomplete( 'disable' );
},
canReturnSubmit: function ( conf, node ) {
if ( $('ul.ui-autocomplete').is(':visible') ) {
return false;
}
return true;
},
owns: function ( conf, node ) {
if ( $(node).closest('ul.ui.autocomplete').length ) {
return true;
}
return false;
},
// Non-standard Editor method - custom to this plug-in
node: function ( conf ) {
return conf._input;
},
update: function ( conf, options ) {
conf._input.autocomplete( 'option', 'source', options );
}
};
})(jQuery, jQuery.fn.dataTable);
})
This discussion has been closed.
Answers
It looks like the problem may be that the autoComplete plugin code is running after the Editor initialization. Try putting the autocomplete function before your $(document).ready. That way it runs before the Editor initialization.
Kevin
Hi
I tried as you suggested but still get a plain text box.
I tried:
(function ($, DataTable) {
and,
Forgot to say I have added a ref. to file editor.autoComplete.js
Are you saying that you are loading editor.autoComplete.js and have the code in your Javascript as depicted above? If so you probably should do one or the other.
The autocomplete plugin seems to work here:
http://live.datatables.net/runogire/1/edit
The inpiut doesn't look or behave much differently then the jQuery UI example:
https://jqueryui.com/autocomplete/
Are you seeing something different or expect something different? Maybe you can update my example to show the issue.
Note: the field is not updated, likely due to how the base example is setup.
Kevin
Hi
Thanks. I think we're getting there. I'm fine just having the text box and the autocomplete entries hanging off it. The issue seems to now be w/ my refs. If I type say 'Item', I can scroll through the entires from the array but they don't show as a drop-down list underneath the text box. I have the following refs for that page:
" I can scroll through the entires from the array"
should read
" I can scroll through the entries from the array with the arrow key on keyboard"
Its hard to say without seeing it but it could be the load order. Try loading
editor.autoComplete.jsafterjquery-ui-1.12.1.js.Kevin
Thnks. Will try.
It gives me only one entry if I scroll, 'Item 1' and won't go beyond that 1st item in the array, and no drop-down list.
Without seeing the problem it would be difficult to offer suggestions to fix. Please update my example to replicate your issue.
Kevin
Thanks. I have updated the exemple and included the refs I use. Many thanks.
It does work. Once you start typing the list appears. This is the same behavior as shown in the jQuery AutoComplete example:
https://jqueryui.com/autocomplete/
However the row is being selected at the same time. You can control this if you like with
select.selector. This example may help reduce confusion when selecting rows for editing.https://datatables.net/extensions/select/examples/initialisation/checkbox.html
If you are expecting a drop down to appear when clicking the input maybe the select2 or selectize plugins will work better:
https://editor.datatables.net/plug-ins/field-type/
Note that when you update a live.datatables.net example the link may change and you should post the updated URL.
Kevin
Hi, I'm sorry but amybe I'm missing something. I don't see the list if I type Item, eg. Please see attached screenshot.
Here's the link: http://live.datatables.net/runogire/2/edit
Combobox was what I had originally but I'm fine using dropdown list.
Here is your example:
http://live.datatables.net/runogire/2/edit
I was looking at inline editing and it works:
Maybe its a CSS issue. @colin or @allan will need to take a look.
Kevin
Many thanks again. I'm not using inline diting here.
I'm getting a different resul when clicking in the name cell: Noting happens under FF and only Item shows under Chrome:
oops, sorry, wrong cell.
Yes, you are correct.
Its a z-index issue. Add:
to your CSS: http://live.datatables.net/runogire/4/edit
Allan
Many thanks Allan. That worked nicely.