Leveraging jQuery UI autocomplete turned out to be amazingly easy and added functionality that is not present in the standard NetSuite autocomplete control.
Here are the steps I followed along with some sample code.
- Add the jQuery UI library to your Suitelet
- Create a Restlet specific to the field you wish to have autocomplete on
- Add the autocomplete feature to an <input type=”text”> control in your form
I’m not going to cover each of these steps in details. I’ll say that adding the jQuery UI library is explained in SuiteAnswers. I did it by uploading the jQuery UI minimized library (a *.js file) to the NetSuite file cabinet and then adding it as a reference in an INLINEHTML control in my form.
When you build your Suitelet, you’ll do something like this…
var suiteletControl =
form.addField({
id: 'custpage_newcontrol',
type: serverWidget.FieldType.INLINEHTML,
label: 'Dynamic HTML'
});
suiteletControl.defaultValue = '[Your HTML goes here]';
Be sure to put your <input type=”text” id=”whatever” /> control here. Then add some JavaScript that looks like this…
var whateverElement = $('#whatever');
whateverElement.autocomplete({
source: '/app/site/hosting/restlet.nl?script=[restlet internalid]&deploy=1',
minLength: 3
});
This JavaScript can live directly in a <script> tag in your HTML above. Be sure to run it after the full form has loaded. If you don’t know how to do that, you shouldn’t be attempting any of this. Sorry, I’m really not a jerk!
Finally, you’ll need a restlet. My restlet is looking up vendors that match the text in the “whatever” textbox. The minLength property of the autocomplete object shown above tells jQuery AutoComplete to omit calling the Restlet until there is at least 3 characters in the textbox.
/**
* @NApiVersion 2.0
* @NscriptType restlet
*/
define(['N/search', 'N/log'],
function (search, log) {
function GET(context) {
var term = context.term;
var mySearch = search.create({
type: search.Type.VENDOR,
columns: [
search.createColumn({ name: 'entityid', sort: 'ASC'}),
search.createColumn({ name: 'isinactive'})
],
filters: [
['entityid', 'startswith', term ]
]
})
var results = mySearch.run().getRange(0,25);
var suggestions = new Array();
results.forEach(
function(result) {
var entityid = result.getValue('entityid');
var inactive = result.getValue('isinactive') ? ' (inactive)' : '';
var label = entityid + inactive;
suggestions.push({
label: label,
value: entityid
})
}
)
return JSON.stringify(suggestions);
}
function POST(context) {
}
function PUT(context) {
}
function DELETE(context) {
}
return {
get: GET,
post: POST,
put: PUT,
delete: DELETE
}
}
)
And finally, in my example, I’m showing how to return a list of vendors, which includes inactive vendors. However, if they are inactive, I’ll append the string ‘ (inactive)’ to the vendor’s company name in the dropdown list. However, the value (as opposed to the label) property in the object returned from the Restlet includes just the vendor’s entityid. That is what gets placed in the textbox when the user selects a row in the autocomplete dropdown list. Super simple, once you get this simple example working in your copy of NetSuite. You can build on this to do things like showing items that are in-stock, etc.
