Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Remote Objects Autocomplete
<apex:page >
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<apex:remoteObjects >
<apex:remoteObjectModel name="Contact" fields="Name,Id,Email,MobilePhone,Phone"/>
</apex:remoteObjects>
<!-- for simplicity all styles and JavaScript is contained in this page instead of in their own css and js files in a static resource -->
<style>
#search-widget {
width: 500px;
}
#search-input-pane {
float: left;
width: 48%;
text-align: right;
}
#search-summary {
float: right;
width: 48%;
text-align: left;
}
</style>
<div id="search-widget">
<div id="search-input-pane">
<label for="search-input">Find: </label>
<input id="search-input" type="text" />
</div>
<div id="search-summary" style=""></div>
</div>
<script>
var selectedId = null;
$("#search-input").autocomplete({
minLength: 2,
delay: 500,
source: function( request, response ) {
var contactRO = new SObjectModel.Contact();
contactRO.retrieve({where: {Name: {like: request.term + "%" }}}, function(err, records, event) {
if (err) {
alert(err);
} else {
var result = [];
records.forEach(function(record) {
result.push( {
label: record.get("Name"),
value: record.get("Id"),
Email: record.get("Email"),
Phone: record.get("Phone"),
MobilePhone: record.get("MobilePhone")
});
});
response(result);
}
});
},
select: function(event, ui) {
event.preventDefault();
$("#search-input").val(ui.item.label);
addSummaryInfo(ui.item);
selectedId = ui.item.value;
},
focus: function(event, ui) {
event.preventDefault();
$("#search-input").val(ui.item.label);
addSummaryInfo(ui.item);
selectedId = ui.item.value;
}
});
function addSummaryInfo(contact) {
$("#search-summary").empty();
$("#search-summary").append("<li>Email: " + contact.Email + "</li>");
$("#search-summary").append("<li>Phone: " + contact.Phone + "</li>");
$("#search-summary").append("<li>Mobile Phone: " + contact.MobilePhone + "</li>");
$("#search-summary").append("<li>Go to <a href='/" + contact.value + "' target='_blank'>detail page</a>");
}
</script>
</apex:page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.