Remote Objects Autocomplete

remoteAutocomplete.page

<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>