I am having trouble modifying jQuery UI Autocomplete (Custom data and display). First, how to have the source option call more than one array. Second, to be able to detect which array the autocomplete result came from and use it in an if-statement.
I will try to be as clear as possible, as I am new at jQuery... any guidance would be greatly appreciated!
A more complete code example: http://codepen.io/seejaeger/pen/iqbke
Overview:
- Declare & concatenate 2 local arrays as the source
- Keep track of which array the suggestion results come from
- Use an if-statement to display different outputs based on their parent array
Each array item has the properties: value, label, desc
I am paying special attention to desc because it is used as non-searchable data and
provides the ability to output two different formatted results. See below:
The First Array
var funds = [
{
value: "fundtest",
label: "Fund Name Test", //searchable
desc: "(Ticker)", // non-searchable
},
{
value: "fundtest2",
label: "Fund Name Test 2", //searchable
desc: "(Ticker)", // non-searchable
}
];
The Second Array
var tickers = [
{
value: "tickertest",
label: "(Ticker Test)", //searchable
desc: "Fund Name", //non-searchable
},
{
value: "tickertest2",
label: "(Ticker Test)", //searchable
desc: "Fund Name", //non-searchable
}
];
The Output
If search suggestion comes from the funds array then, output:
item.label + " " + item.desc
If search suggestion comes from the tickers array, then output:
item.desc + " " + item.label
Notice how they are swapped?
The different HTML output structures will allow for both results
to output to screen as: 'Fund Name (ticker)'
UPDATE
Parts 1 & 2 are now solved.
Still having some issues with part 3.
Will finally post an answer once I solve it (unless someone magically chimes in).
Big thanks to TR for his guidance.
View the latest edition of this work here:
http://codepen.io/seejaeger/pen/iqbke
