textboxlist icons

[Joshua Graham, modificado hace 8 años.]

Hi guys,

I have a textboxlist and would like the autocomplete suggestions to include an icon. My autocomplete data-source items are in the following format

[a number, '<img src="image location"> name', 'name without icon']

I would like the autocomplete drop down to display the second element (with the icon), when an element is selected I would like the third element to be the text that is displayed in the textboxlist. Is this possible?

[Nate Cavanaugh, modificado hace 8 años.]

Hi Joshua,
Yeah, it is possible. There is a method on the TextboxList called formatResult which is intended to be overridden so you can display the data however you prefer.
Depending on the schema you have set up, you would return the property of the result object back that you wish to display. Depending on what you have set as your matchKey is what will be queried against and displayed when chosen.
I'll paste an example, and then call out the important parts.

var states = [
	[0, '<img src="./assets/article0.png"> Texas', 'Texas' ],
	[1, '<img src="./assets/article1.png"> Utah', 'Utah' ],
	[2, '<img src="./assets/article2.png"> Vermont', 'Vermont' ],
	[3, '<img src="./assets/article3.png"> Virginia', 'Virginia' ],
	[4, '<img src="./assets/article0.png"> Washington', 'Washington' ],
	[5, '<img src="./assets/article1.png"> West Virginia', 'West Virginia' ],
	[6, '<img src="./assets/article2.png"> Wisconsin', 'Wisconsin' ],
	[7, '<img src="./assets/article3.png"> Wyoming', 'Wyoming' ]
];

window.TBL = new A.TextboxList(
	{
		dataSource: states,
		schema: {
			resultFields: ['key', 'display', 'name']
		},
		matchKey: 'name',
		typeAhead: true,
		contentBox: '#myAutoComplete',
		width: 600
	}
);

TBL.formatResult = function(result, currentQuery, resultMatch) {
	return result.display || resultMatch;
};

TBL.render('#demo');

You'll see in the code above, these two properties are what define the format of the result object that's passed to formatResult:

schema: {
	resultFields: ['key', 'display', 'name']
},
matchKey: 'name',

And this is the method that you would overwrite:

TBL.formatResult = function(result, currentQuery, resultMatch) {
	return result.display || resultMatch || '';
};

schema: { resultFields: [...] } will change the array result into an object, and assign the items of that result to the passed key.

You could name them whatever you wanted, but then inside of formatResult, you would need to return result.whateverNameYouChose.

I hope that helps