Autocomplete in Editor window

Riker

I have a Datatable that is pulling data from a SQL table and everything works perfect.
The thing I am stuck getting autocomplete to not display the whole list, if that's possible?
As soon as I type in any letter the whole list shows and doesn't decrease as I type further.

I have a .php page doing the SQL select and creating the array / list that I would like to populate from.

name of the php that has the output is 'username.php'
Data is a simple list

["user1","user2"] etc

    editor = new $.fn.dataTable.Editor({
      ajax: {
        url: 'table_editor.php',
      },
      table: '#usertable',
      fields: [{
        label: "Username *",
        name: "username",
        type: "autoComplete",
        opts: {
          source: "username.php",
        }
      }, {
        label: "Email*",
        name: "email",
      }, {
        label: "Phone No",
        name: "phone_no",
      }, ]
    });

allan

The thing I am stuck getting autocomplete to not display the whole list, if that's possible?

I don't see an option for limiting the list length in the jQuery UI documentation. Your best bet is probably to apply a LIMIT to the SQL query you are using in username.php.

Allan

Riker

By 'not display the whole list' I mean as you type more characters the list should decrease and narrow down to what you have typed.
It seems to work this way when you use something like this

    $.getJSON("usernames.php", {
        database: "database_name"
      },
      function(data) {
        $("#username_list").autocomplete('option', 'source', data)
      });

    $("#username_list").autocomplete({
      minLength: 0,
    });

But this is for a generic div ID on the main page.
Trying to do it on the editor popup window seems a whole other thing.

allan

Could you give me a link to your page showing the issue please? There isn't anything immediately obvious which is wrong in the code shown above.

Thanks,
Allan

Riker

allan is there a way to enter the above code within the editor username field?
I think that could be the solution but I am unsure how to go about this since I am new to JQuery.
The example posted above works for any input div on the actual webpage but does not work within the editor window.

    editor = new $.fn.dataTable.Editor({
      ajax: {
        url: 'controller.php',
      },
      table: '#example',
      fields: [{
        label: "Username *",
        name: "username",
      },

Riker

A lot of people have mentioned it could be z-index but I've tried all sorts of combinations and that didn't work.

Even tried to append to the .modal-open class but no luck.

allan

It does sound like it could be a z-index issue. If you can give me a link to the page I can confirm if that is the case or not. The way I'd do that is to pop open the browser's inspector for the document and check that the auto-complete list is being added to the document. If it is, then check what its z-index is and adjust as needed.

Allan

Riker

Ok I've resolved this now with a simple fix.

editor = new $.fn.dataTable.Editor({
  ajax: {
    url: 'controller.php',
  },
  table: '#example',
  fields: [{
    label: "Username *",
    name: "username",
   type: "autoComplete"
   opts: { source: Users, }
  },

$.getJSON("usernames.php", 
    function (data) {
        Users = data;
      }); 

Although this has brought upon a new issue.
Having type: autoComplete automatically enables that field on the Edit function even though I specify the following:

   editor.on('initEdit', function(e, data, action) {
      editor.show();
      editor.disable('username');