JQueryUI Autocomplete not autocompleting

_Ronnie_

Hi

I wonder if you could help me get Autocomplete to work. I have set up a basic test but still am struggling and would probably benefit from a basic example.

I am using JQueryUI/BS4/DataTables and have several different tables on a single page, 2 with editors. I want to use AutoComplete for the 'diagnosis' field. The relevant code is:

var diagnosisEditor = new $.fn.dataTable.Editor( {
        ajax: {
            url: 'common/ajax/diagnoses.php?id={id}',
            type: 'POST'
        },
        table: '#diagnoses',
        fields: [
            {
                "label": "patient_id:",
                "name": "diagnoses.patient_id",
                "type": "hidden",
                "def": "{id}"
            },
            {
                "label": "Date:",
                "name": "diagnoses.diagnosis_date",
                "type": "datetime",
                "format": "DD-MM-YYYY"
            },
            {
                "label": "Diagnosis:",
                "name": "diagnosis_list.diagnosis",
                "type": "autoComplete",
                "opts": {
                    "source": [
                        "john", "fred", "james", "malcolm", "dave", "alex", "ruby"
                    ]
                }

            },
            {
                "label": "Notes:",
                "name": "diagnoses.notes",
                "type": "text"
            }
        ]
    } );

The field appears, but AutoComplete does not seem to work. What am I doing wrong?!

Thanks in advance
Ronnie

tangerine

Do you have DataTables' Editor autoComplete plug-in?

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

_Ronnie_

I have included the autocomplete plugin and jQueryUI etc. There are no JS errors reported. Includes as follows:

<link href="common/bootstrap/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="common/DataTables/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="common/TableEditor/css/editor.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="common/jqueryui/jquery-ui.min.css"/>
<link href="common/icons/font/css/open-iconic-bootstrap.min.css" rel="stylesheet">

<script src="common/jquery/jquery-3.2.1.min.js"></script>
<script src="common/bootstrap/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="common/jqueryui/jquery-ui.min.js"></script>
<script type="text/javascript" src="common/DataTables/datatables.min.js"></script>
<script type="text/javascript" src="common/TableEditor/js/dataTables.editor.min.js"></script>
<script type="text/javascript" src="common/TableEditor/js/editor.bootstrap4.min.js"></script>
<script type="text/javascript" src="common/TableEditor/js/editor.autoComplete.js"></script>
<script type="text/javascript" src="common/moment.js"></script>
<script src="common/chart.bundle.min.js"></script>

allan

In all honestly, I found the jQuery UI AutoComplete plug-in really hard to work with. Having said that, from your code above, it does look like it should be working.

Are you able to give me a link to your page so I can take a look and debug why it isn't working please?

Thanks,
Allan

tangerine

I'm not sure if this is relevant, but I use a separate js file containing autoComplete default settings.

// jQuery UI datepicker defaults for "date of birth" and "date of death".

$.datepicker.setDefaults({
        dateFormat: "dd-mm-yy",
        showOn: "focus",
        changeMonth: true,
        changeYear: true,
        maxDate: "+0d", 
        yearRange: '-100:+0'
});

_Ronnie_

Dear Allan,

It does seems that AutoComplete is hard to work with. I would welcome any alternative if it has similar functionality.

A test page I have up is at http://manchestershouldersurgeon.co.uk/test/test.php

I have stripped it down to the bare bones, but still struggling to make it work. Wonder if you can spot the error!

Many thanks!
Ronnie

allan

Select2 is the one I tend to use myself as its documentation is excellent these days. Given that you aren't using jQuery UI styling, I think that would be a good change in this case and save you a few KB in Javascript and CSS size.

Its weird - I don't see what is causing the issue on the page there. I'll take a closer look if you do want to use jQuery UI - but if you want to switch to Select2 (or Selectize which is another option), I'll give you a hand with that if you run into any issues with it.

Allan

_Ronnie_

Thanks Allan.

I have managed to get Select2 working reasonably well. There are a few issues such as default values, but I'm sure this can be sorted.

_Ronnie_

Hi

The only issue I have is getting the select box to display the selected value in Edit mode - at the moment, it is blank. Please could I see an example of how to make this part work?

Many thanks!
Ronnie

allan

Because you've got the ajax option set for the Select2 plug-in, it needs to make an Ajax request to get the list of options from the server! This is the URL it is attempting to load:

http://manchestershouldersurgeon.co.uk/test/diagnosis_list.php?initialValue=true&value=%22OA%20Shoulder%22

That URL is currently throwing a 500 error (you'd need to look at the server's error logs to know why that is the case).

That URL should return the list of options, including the current value.

Allan

_Ronnie_

Yes - I'd disabled that script as had got it working and moved it to the live site.

I not realise it was how I was parsing the value parameter - it seems to be enclosing the text within quotes when sending to the ajax script.

All sorted now. Thanks.