Getting contacts from ContactsApp Service for autocomplete using GAS

Question

How do I code a getContacts() using apps script if I'll have to use JQuery autocomplete "multiple", to fetch emails(email only not phone or other details).

It should return in such a way that If a person has 2 email ids saved under a single name, then it has to be added to returning JSON array.

Example if a PERSON.A has pera1@gmail.com and pera1@yahoo.com then the list has to be

var emails = [
      "PERSON.A" <pera1@gmail.com>,
      "PERSON.A" <pera1@yahoo.com>,
...
    ];

javascript

emails = google.script.run.getContacts();

$( function() {
    var availableTags = emails;
    function split( val ) {
      return val.split( /,\s*/ );
    }
    function extractLast( term ) {
      return split( term ).pop();
    }

    $( "#recipients" )
      // don't navigate away from the field on tab when selecting an item
      .on( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &&
            $( this ).autocomplete( "instance" ).menu.active ) {
          event.preventDefault();
        }
      })
      .autocomplete({
        minLength: 0,
        source: function( request, response ) {
          // delegate back to autocomplete, but extract the last term
          response( $.ui.autocomplete.filter(
            availableTags, extractLast( request.term ) ) );
        },
        focus: function() {
          // prevent value inserted on focus
          return false;
        },
        select: function( event, ui ) {
          var terms = split( this.value );
          // remove the current input
          terms.pop();
          // add the selected item
          terms.push( ui.item.value );
          // add placeholder to get the comma-and-space at the end
          terms.push( "" );
          this.value = terms.join( ", " );
          return false;
        }
      });
  } );

Answer 1

Assuming you get an array of email addresses that are RFC Compliant, you can pick them apart. For example:

addressBook = [
  "'Homer Simpson' hsimpson@fox.net",
  "'Homer Simpson' h.j.simpson@snpp.com",
  "'Marge Simpson' msimpson@fox.net",
  "'Bart Simpson' bsimpson@fox.net",
  "'Bart Simpson' i.c.weiner@fox.net",
  "'Lisa Simpson' hsimpson@fox.net",
  "'Maggie Simpson' maggie.simpson@fox.net"
];

Typing h should return 2 results:

'Homer Simpson' hsimpson@fox.net
'Homer Simpson' hsimpson@theplant.com

The basics of this would look like:

source: function(request, response) {
  // delegate back to autocomplete, but extract the last term
  response($.ui.autocomplete.filter(
  addressBook, extractLast(request.term)));
}

I like to add a little control and ensure the format is specific.

Working example: https://jsfiddle.net/Twisty/hvLdp11j/3/

HTML

<div class="ui-widget">
  <div class="ui-widget-header ui-corner-top center">
    Select Recipients
  </div>
  <div class="ui-widget-content ui-corner-bottom">
    <input type="text" id="emails" />
  </div>
</div>

JavaScript

// Base code: http://jqueryui.com/autocomplete/#multiple
// Data example to mimic https://developers.google.com/apps-script/reference/contacts/contacts-app#getcontacts
var addressBook = [
  "'Homer Simpson' hsimpson@fox.net",
  "'Homer Simpson' h.j.simpson@snpp.com",
  "'Marge Simpson' msimpson@fox.net",
  "'Bart Simpson' bsimpson@fox.net",
  "'Bart Simpson' i.c.weiner@fox.net",
  "'Lisa Simpson' hsimpson@fox.net",
  "'Maggie Simpson' maggie.simpson@fox.net"
];

$(function() {
  function split(val) {
    return val.split(/,\s*/);
  }

  function extractLast(term) {
    return split(term).pop();
  }

  function findName(contact) {
    var name;
    var regex = /.(.+). .*/g;
    name = regex.exec(contact);
    return name[1];
  }

  function findNameEmail(contact) {
    var tmp, name, email;
    var regex = /.(.+). (.*)/g;
    tmp = regex.exec(contact);
    name = tmp[1];
    email = tmp[2];
    return name + " <" + email + ">";
  }

  $("#emails")
    // don't navigate away from the field on tab when selecting an item
    .on("keydown", function(event) {
      if (event.keyCode === $.ui.keyCode.TAB &&
        $(this).autocomplete("instance").menu.active) {
        event.preventDefault();
      }
    })
    .autocomplete({
      minLength: 0,
      source: function(request, response) {
        var names = [];
        $.each(addressBook, function(k, v) {
          names.push(findNameEmail(v));
        });
        // delegate back to autocomplete, but extract the last term
        response($.ui.autocomplete.filter(
          names, extractLast(request.term)));
      },
      focus: function() {
        // prevent value inserted on focus
        return false;
      },
      select: function(event, ui) {
        var terms = split(this.value);
        // remove the current input
        terms.pop();
        // add the selected item
        terms.push(ui.item.value);
        // add placeholder to get the comma-and-space at the end
        terms.push("");
        this.value = terms.join(", ");
        return false;
      }
    });
});

I started with trying to just find the name and using that as the label. Then I saw that you could not discern the right contact. So I switched it to grabbing the Name and Email to use.

If you need, update your post with a more complete example of the data being returned from Google, and it should be easy to update.