Array is parsing as string in auto-complete control

Question

I am using EasyAutoComplete to provide auto-complete control on my page.

I am passing it an array as a variable. The variable is an array that I can step through with index and looks good to me. But when passed to this plugin, the input control only has one selection, which looks like this...

name1,name2,name3

It should look like this...

name1
name2
name3

as individual selections. Here is my code...

$(document).ready(function () {

var dispatchNames = [];

$('.square').each(function () {

    //convert each div with .square class toString
    var square = $(this).html().toString();

    //grab availability value (if True, tech is available)
    var availability = $(this).find('tr:eq(4)').find('td').text();

    //grab IP (if exists, tech is online)
    online = $(this).find('tr:eq(3)').find('td').text()        

    if ((availability === "True") && (online.indexOf("10.") === 0)) {

        //grab tech name
        dispatchNames.push([$(this).find('tr:eq(0)').find('td').text()]);

    }

})

var availableTechs = {
  data: [dispatchNames],
};

$("#dispatchTechs").easyAutocomplete(availableTechs);

  //alert(dispatchNames);

})

I can step through 'dispatchNames' as an array, but when I pass it to 'availableTechs', it is one long string.

I have tried splitting the string, etc, and it is always the same result.

Please advise if there is something I need to do for 'dispatchNames' before passing.

Thank you!

EDIT

easyAutocomplete plugin works like this...

var options = {
  data: ["blue", "green", "pink", "red", "yellow"]
};

$("#basics").easyAutocomplete(options);

Instead of providing an array for data:, I am trying to pass it an array in a variable, which apparently is being treated as a single object. That, I believe, is what I seek assistance with.

UPDATE

Using Match...

        var availableTechs = {

    data: dispatchNames,
    list: {
        match: {
            enabled: true
        }
    }

};

$("#dispatchTech").easyAutocomplete(availableTechs);

})

Here is the console error when using match:

7jquery.easy-autocomplete.js:64 Uncaught TypeError: element.search is not a function
    at Object.method (jquery.easy-autocomplete.js:64)
    at match (jquery.easy-autocomplete.js:653)
    at findMatch (jquery.easy-autocomplete.js:630)
    at proccessData (jquery.easy-autocomplete.js:613)
    at ListBuilderService.processData (jquery.easy-autocomplete.js:455)
    at loadData (jquery.easy-autocomplete.js:1338)
    at HTMLInputElement.<anonymous> (jquery.easy-autocomplete.js:1308)
    at HTMLInputElement.dispatch (jquery-3.3.1.js:5183)
    at HTMLInputElement.elemData.handle (jquery-3.3.1.js:4991)

Answer 1

You are passing an array wrapped within an array, in availableTechs.data.

Your array at the moment looks like:

[0]=>
  [
   0=>'name1', 
   1=>'name2', 
   2=>'name3'
  ]

What you need to do is remove that array wrapper.

var availableTechs = {
  data: dispatchNames,
};

And now your output is:

[
  0=>'name1', 
  1=>'name2', 
  2=>'name3'
]