You are here: Home / Documentation / How To's / Using email address autocomplete to set a name field, and vice versa

Using email address autocomplete to set a name field, and vice versa

Picking an email address sets the name field, and picking a name sets the email address field.

Caveat: this information is specific to UW Oshkosh's email address autocompletion mechanism!

This is an extension to the how-to entitled Email address autocompletion in which we explained how we set up autocompletion of just an email address field.

This how to explains how you can tie two fields together: an email address field and a full name field.  Thanks to our David Hietpas, our resident JavaScript wiz. :)

Assume you've created a new PloneFormGen form. By default, it contains an email address field ("replyto"), a subject field ("topic"), and a comments field.  

We are going to enable autocompletion on the email address field so that when you start typing a name, you see a list of matching choices, and when you choose one, the email address gets put into the email address field and the matching person's name gets put into the subject field.

In the ZMI -> portal_skins -> custom, add a new File object called email_address_autocompletion.js, and put the following into it:

$(function() {
    var cache = {};
    $( "#replyto" ).autocomplete({
      minLength: 2,
      select: function (e, ui) {
        $("#topic").val(ui.item.fullname)
      },
      source: function( request, response ) {
        var term = request.term;
  
        $.getJSON( "getMatchingEmailWS", { match: request.term, type: 'json' }, function( data ) {
            response( $.map( data, function( item ) {
              return {
                label: item.f + " " + item.m + " " + item.l + " <" + item.e + ">",
                value: item.e,
                fullname: item.f + " " + item.m + " " + item.l,
              }
            }));
        });
      }
    });
  });

$(function() {
    var cache = {};
    $( "#topic" ).autocomplete({
      minLength: 2,
      select: function (e, ui) {
        $("#replyto").val(ui.item.email)
      },
      source: function( request, response ) {
        var term = request.term;
  
        $.getJSON( "getMatchingEmailWS", { match: request.term, type: 'json' }, function( data ) {
            response( $.map( data, function( item ) {
              return {
                label: item.f + " " + item.m + " " + item.l + " <" + item.e + ">",
                value: item.f + " " + item.m + " " + item.l,
                email: item.e,
              }
            }));
        });
      }
    });
  });

Still in the ZMI -> portal_skins -> custom folder, create an External Method with ID, module, and function name "getMatchingEmailWS".  (You will have had to put a file getMatchingEmailWS.py into the Extensions folder on the file system).

In the ZMI -> portal_javascripts, scroll to the bottom and add a new registration with ID "email_address_autocompletion.js".

Reload the PloneFormGen form you just created, so that the new JavaScript loads and takes effect.

Now when you start typing a last name in either the email address or subject field and you pick one of the choices, both fields get filled appropriately.

Navigation