Select2 with AutoComplete: Keyword suggestion shown but did not register when clicked.
Select2 with AutoComplete: Keyword suggestion shown but did not register when clicked.
aungkohein
Posts: 38Questions: 5Answers: 0
Hi Allan,
I managed to get the AutoComplete work partially with Select2.
But there is a problem with the JS (I guess). When I type 2nd character in the cell, the keyword suggestion showed but immediately it also auto saved; which it did not register the full keyword.
Also, when I clicked on the AutoComplete suggestion, it only register the 1st character to the DB.
<head>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap CSS -->
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery UI -->
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<!-- DataTable -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/ju-1.12.1/jq-3.3.1/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.18/af-2.3.0/b-1.5.2/b-colvis-1.5.2/b-flash-1.5.2/b-html5-1.5.2/b-print-1.5.2/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.4.0/r-2.2.2/rg-1.0.3/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.css">
<link rel="stylesheet" type="text/css" href="css/generator-base.css">
<link rel="stylesheet" type="text/css" href="css/editor.jqueryui.min.css">
<!-- Datatables Buttons & Select -->
<link rel="stylesheet" type="text/css" href="css/buttons.dataTables.min.css">
<!-- Select2 CSS -->
<link rel="stylesheet" type="text/css" href="css/select2.min.css">
<!-- KeyTable -->
<link rel="stylesheet" type="text/css" href="css/keyTable.dataTables.min.css">
<!-- Editor DataTables-->
<link rel="stylesheet" type="text/css" href="css/editor.dataTables.min">
<!-- Custom CSS -->
<link href="/assets/css/style.css" rel="stylesheet">
<!-- JQuery UI -->
<script type="text/javascript" charset="utf-8" src="js/editor.jqueryui.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-ui.js"></script>
</head>
<body>
<script type="text/javascript" src="/assets/js/bootstrap.min.js"></script>
<!-- JS -->
<script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/ju-1.12.1/jq-3.3.1/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.18/af-2.3.0/b-1.5.2/b-colvis-1.5.2/b-flash-1.5.2/b-html5-1.5.2/b-print-1.5.2/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.4.0/r-2.2.2/rg-1.0.3/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.js"></script>
<!-- Auto Complete -->
<script type="text/javascript" charset="utf-8" src="js/editor.autoComplete.js"></script>
<!-- Datatable Buttons & Select -->
<script type="text/javascript" charset="utf-8" src="js/dataTables.buttons.min.js"></script>
<!-- Select2 JS -->
<script type="text/javascript" charset="utf-8" src="js/select2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/editor.select2.js"></script>
<!-- KeyTable -->
<script type="text/javascript" charset="utf-8" src="js/dataTables.keyTable.min.js"></script>
<!-- DataTables Editor -->
<script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/table.cargoes.js"></script>
</body>
table.<name>,js
(function($){
$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
ajax: 'php/table.<name>.php',
table: '#<name>',
fields: [
{
"label": "Date:",
"name": "date",
"type": "datetime",
"format": "DD\/MM\/YY"
},
{
"label": "Status:",
"name": "status",
"type": "autoComplete",
"opts": {
"source":
[
"Open",
"Pending",
"Closed"
]
}
Answers
I just tested and realized that there is a crash only when I use Fixed Column.
var table = $('#<name>').DataTable( {
fixedColumns: {
leftColumns: 3
}
I guess we cannot use AutoComplete on Fixed Columns?