jQuery autocomplete is a powerful tool that can be overlooked or underutilized. Here is an example that demonstrates not only how jQuery autocomplete works, but some of its hidden potential.
In this example I demonstrate applying the contents of multiple HTML controls to filter results of a single textbox’s autocomplete results. Here is what it looks like in action.
My data is articles of clothing. A garment’s category only includes ‘tops’ and ‘bottoms’. It’s pretty sparse for an autocomplete example, but you get the idea.
My example includes the following scripts: Suitelet, Restlet, Client, and an HTML file. The JSON file takes the place of a database. I created my JASONized data using vsCode’s Copilot. That’s a handy tip!
Here is the HTML file’s contents.
<label for="filters">Additional Filters</label><br />
<div id="filters" style="border: solid 2px blue; background-color: lightblue; padding: 10px; width: 40%;">
<table>
<tr>
<td><label for="garment_type">Garment Type:</label></td>
<td><label for="garment_color">Garment Color:</label></td>
<td><label for="garment_size">Garment Size:</label></td>
<td><label for="garment_manufacturer">Garment Manufacturer:</label></td>
<td><label id="hover_sku_heading" style="display: none;">SKU:</label></td>
</tr>
<tr>
<td><select id="garment_type" name="garment_type">
<option value="">-- Select Type --</option>
<option value="shirt">Shirt</option>
<option value="tank">Tank</option>
<option value="sweater">Sweater</option>
<option value="pants">Pants</option>
<option value="shorts">Shorts</option>
</select></td>
<td><select id="garment_color" name="garment_color">
<option value="">-- Select Color --</option>
<option value="blue">Blue</option>
<option value="gray">Gray</option>
<option value="black">Black</option>
<option value="kakhi">Kakhi</option>
</select></td>
<td><select id="garment_size" name="garment_size">
<option value="">-- Select Size --</option>
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="XL">XL</option>
<option value="30x32">30x32</option>
<option value="32x32">32x32</option>
<option value="34x32">34x32</option>
<option value="36x32">36x32</option>
<option value="34x30">34x30</option>
<option value="36x34">36x34</option>
</select>
</td>
<td><select id="garment_manufacturer" name="garment_manufacturer">
<option value="">-- Select Manufacturer --</option>
<option value="LL Bean">LL Bean</option>
<option value="Polo">Polo</option>
<option value="Ralph Loren">Ralph Loren</option>
<option value="Levi's">Levi's</option>
<option value="Wrangler">Wrangler</option>
<option value="Fruit of the Loom">Fruit of the Loom</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td id="hover_type"></td>
<td id="hover_color"></td>
<td id="hover_size"></td>
<td id="hover_manufacturer"></td>
<td id="hover_sku"></td>
</tr>
</table>
</div><br />
<br />
<label for="garment_id">Unique ID (can be a hidden field):</label><br />
<input type="text" id="garment_id" name="garment_id" placeholder="SKU" disabled /><br />
<br />
<label for="garment_category">Garment Category (with autocomplete):</label><br />
<input type="text" id="garment_category" name="garment_category" placeholder="Type either 'top' or 'bottom'" /><br />
<br />
<p>
This demonstrates the use of the <strong>jQuery autocomplete</strong> feature in a NetSuite Suitelet.
Key takeaways include:
<ul>
<li>Incorporates additional filters beyond a textbox control (Type, Color, Size, Manufacturer)</li>
<li>Displays multiple Meta Data in the autocomplete list beyond values typed in the textbox (separated by "|").</li>
<li>Returns a unique key associated with the selected entry (The garment's SKU).</li>
<li>Exposes extensive Meta Data as the user hovers over possible selections.</li>
</ul>
</p>Here is the client script’s contents.
/**
* demo_client_autocomplete.js
* @NApiVersion 2.1
* @NScriptType ClientScript
*/
/*********************************************************************************
*********************************************************************************
FILE: demo_client_autocomplete.js
*********************************************************************************
*********************************************************************************/
//@ sourceURL=demo_client_autocomplete.js
define(['N/url', 'N/https'],
(url, https) => {
function pageInit(context) {
$(document).ready(function () {
let garment_id_field = $('input[name="garment_id"]');
let garment_category_field = $('input[name="garment_category"]');
restlet_base_url = url.resolveScript({
scriptId: 'customscript_demo_restlet_autocomplete',
deploymentId: 'customdeploy_demo_restlet_autocomplete',
returnExternalUrl: false
});
/**
* What's going on here is making functions available in the global scope.
* You can see that it also keeps them unique by exposing them inside a
* JavaScript namespace called demo_autocomplete_client.
*/
demo_autocomplete_client.restletGet = restletGet;
demo_autocomplete_client.restletPost = restletPost;
/**
* You turn on autocomplete via the autocomplete method associated with
* the input[type=text] control.
*/
garment_category_field.autocomplete({
source: function (request, response) {
let type = $('select[name="garment_type"]').val();
let color = $('select[name="garment_color"]').val();
let size = $('select[name="garment_size"]').val();
let manufacturer = $('select[name="garment_manufacturer"]').val();
/**
* In addition to typed text, you can send additional parameters to act as
* filters in the autocomplete responses.
*/
restletGet(
'method=autocomplete' +
'&category=' + request.term + // <<<=== request term contains the typed text
'&type=' + type +
'&color=' + color +
'&size=' + size +
'&manufacturer=' + manufacturer
,
function (data) {
response(JSON.parse(data));
}
);
},
minLength: 3,
/**
* This event fires on selection of one of the rows in the autocomplete list.
* Note the ui.item contains all properties you wish to send back.
*
* Properties that must be returned are Label and Value.
* Label: is what displays in the selectable list.
* Value: would typically represent an associated value.
*/
select: function (event, ui) {
event.preventDefault();
garment_id_field.val(ui.item.value);
garment_category_field.val(ui.item.name);
},
/**
* This event fires whenever the user hovers over a possble selection.
*/
focus: function (event, ui) {
$('#hover_size').text(ui.item.size);
$('#hover_color').text(ui.item.color);
$('#hover_type').text(ui.item.type);
$('#hover_manufacturer').text(ui.item.manufacturer);
$('#hover_sku_heading').show();
$('#hover_sku').text(ui.item.sku);
event.preventDefault();
},
close: function (event, ui) {
event.preventDefault();
},
change: function (event, ui) {
event.preventDefault();
}
});
$('input[name="garment_category"]').focus(
function () {
$('input[name="garment_category"]').val('');
$('input[name="garment_id"]').val('');
}
)
});
}
let restlet_base_url;
function restletGet(parameters, callback) {
return https.get.promise({
url: restlet_base_url + '&' + parameters
})
.then(response => {
callback(response.body);
})
.catch(
reason => {
alert('error reason: ' + reason);
}
)
}
function restletPost(parameters, callback) {
return https.post.promise({
url: restlet_base_url,
body: parameters
})
.then(response => {
callback(response.body);
})
.catch(
reason => {
alert('Error: ' + reason);
callback('fail');
}
)
}
return {
pageInit: pageInit
};
}
);
var demo_autocomplete_client = {
restletGet: () => { return false; }
,
restletPost: () => { return false; }
}And finally, here is the Restlet’s contents.
/**
* @NApiVersion 2.1
* @NScriptType restlet
*/
define(['N/file'],
(file) => {
function GET(context) {
if (context.hasOwnProperty('method')) {
let method = context.method;
switch (method.toLowerCase().trim()) {
case 'autocomplete':
if (context.hasOwnProperty('category')) {
return auto_complete(context.category, context.type, context.color, context.size, context.manufacturer);
}
break;
}
}
return 'Method not found';
}
function auto_complete(garment_category, garment_type, garment_color, garment_size, garment_manufacturer) {
let sample_data = file.load({
id: './demo_suitelet_autocomplete.json'
}).getContents();
let sample_data_json = JSON.parse(sample_data);
return JSON.stringify(
sample_data_json.filter(
(item) => {
return item.category.toLowerCase().indexOf(garment_category.toLowerCase()) !== -1;
}
)
.filter(
(item) => {
return !garment_type || (garment_type == item.type);
}
)
.filter(
(item) => {
return !garment_color || (garment_color == item.color);
}
)
.filter(
(item) => {
return !garment_size || (garment_size == item.size);
}
)
.filter(
(item) => {
return !garment_manufacturer || (garment_manufacturer == item.manufacturer);
}
)
.map(
(item) => {
let label = `${item.category} | ${item.name}`;
return {
label: label,
value: item.sku,
name: item.name,
color: item.color,
size: item.size,
type: item.type,
manufacturer: item.manufacturer,
sku: item.sku
}
}
)
.sort(
(a, b) => {
return a.label.localeCompare(b.label);
}
)
.slice(0, 10) // limit to 10 results
);
}
return {
get: GET
}
}
)I’ve left out 2 of the five files. This post was getting long and those should be relatively straightforward.
Cheers!
NetSuite Experiences 