Javascript

<script type="text/javascript" charset="utf-8">
    //*********************************************************    
    // Contacts Capabilities
    //*********************************************************
    function getContactReady() {
    	$("#givenName").val('');
    	$("#familyName").val('');
    	$("#displayName").val('');
        $("#phoneNumber").val('');
    }
    
    function addContact() {       
		function addContactSuccess(contact) {
			getContactReady();
			alert("Contact is added.");
			history.back();
		}
		
		function addContactError(contactError) {
			alert("ERROR: Cannot add contact. Code: " + contactError.code);
		}
		
    	var myContact = navigator.contacts.create();
    	var fullName = new ContactName();
    	var phoneNumbers = [];
    	
    	fullName.givenName  = $("#givenName").val();
    	fullName.familyName = $("#familyName").val();
    	
    	myContact.displayName = $("#displayName").val();
        myContact.name = fullName;
        
        phoneNumbers[0] = new ContactField('home', $("#phoneNumber").val(), false);
        myContact.phoneNumbers = phoneNumbers;
        
        myContact.save(addContactSuccess, addContactError);
    }
    
    function getFindContactReady() {
    	$("#findContactProperties").empty();
    	$("#findContactForm #searchName").val('');
    }
    
    function findContact() {
    	$("#findContactProperties").empty();

    	function findContactSuccess(contacts) {
    		if (contacts.length == 0) {
    			$("#findContactProperties").append("<p>ERROR: Contact not found.</p>");
    		}
    		else {
	    		for (var i=0; i<contacts.length; i++) {
	    			var contactText = "<div data-role='collapsible' id='conColSet" + (i+1) + "'>";
	    			contactText += "<h3>Display Name: " + textFormat(contacts[i].displayName)     + "</h3>";
	    			contactText += "<p>Display Name: "  + textFormat(contacts[i].displayName)     + "<br/>";
	    			contactText += "Given Name: "       + textFormat(contacts[i].name.givenName)  + "<br/>";
	    			contactText += "Family Name: "      + textFormat(contacts[i].name.familyName) + "<br/>";
					
					if (contacts[i].phoneNumbers != undefined) {
		    			for (var j=0; j<contacts[i].phoneNumbers.length; j++) {
		    				contactText += "<div data-role='collapsible'><h4>Phone Number " + (j+1) + "</h4>";
		    				contactText += "<p>Type: "   + textFormat(contacts[i].phoneNumbers[j].type)  + "<br/>";
		    				contactText += "Value: "     + textFormat(contacts[i].phoneNumbers[j].value) + "<br/>";
		    				contactText += "Preferred: " + textFormat(contacts[i].phoneNumbers[j].pref)  + "<br/>";
		    				contactText += "</p></div>";
		    			}
	    			}

    				if (contacts[i].addresses != undefined) {
		    			for (var j=0; j<contacts[i].addresses.length; j++){
		    				contactText += "<div data-role='collapsible'><h4>Address " + (j+1)                     + "</h4>";
		    				contactText += "<p>Perf: "        + textFormat(contacts[i].addresses[j].pref)          + "<br/>";
		    				contactText += "Type: "           + textFormat(contacts[i].addresses[j].type)          + "<br/>";
		    				contactText += "Formatted: "      + textFormat(contacts[i].addresses[j].formatted)     + "<br/>";
		    				contactText += "Street Address: " + textFormat(contacts[i].addresses[j].streetAddress) + "<br/>";
		    				contactText += "Locality: "       + textFormat(contacts[i].addresses[j].locality)      + "<br/>";
		    				contactText += "Region: "         + textFormat(contacts[i].addresses[j].region)        + "<br/>";
		    				contactText += "Postal Code: "    + textFormat(contacts[i].addresses[j].postalCode)    + "<br/>";
		    				contactText += "Country: "        + textFormat(contacts[i].addresses[j].country)       + "<br/>";
		    				contactText += "</p></div>";
		    			}
	    			}
	    			
	    			if (contacts[i].organizations != undefined) {
		    			for (var j=0; j<contacts[i].organizations.length; j++){
		    				contactText += "<div data-role='collapsible'><h4>Organization " + (j+1)             + "</h4>";
		    				contactText += "<p>Perf: "    + textFormat(contacts[i].organizations[j].pref)       + "<br/>";
		    				contactText += "Type: "       + textFormat(contacts[i].organizations[j].type)       + "<br/>";
		    				contactText += "Name: "       + textFormat(contacts[i].organizations[j].name)       + "<br/>";
		    				contactText += "Department: " + textFormat(contacts[i].organizations[j].department) + "<br/>";
		    				contactText += "Title: "      + textFormat(contacts[i].organizations[j].title)      + "<br/>";
		    				contactText += "</p></div>";
						}
					}
	    			contactText += "</p></div>";
	    			$("#findContactProperties").append(contactText).trigger('create');
	    		}
    		}
    	}
    	
    	function findContactError(contactError) {
    		$("#findContactProperties").empty();
    		$("#findContactProperties").append("<p>ERROR: " + contactError.code + "</p>").trigger("create");
    	}

    	var options = new ContactFindOptions();
    	options.filter = $("#findContactForm #searchName").val();
    	options.multiple=true;

    	var fields = ["displayName", "name", "phoneNumbers", "addresses", "organizations"];
    	navigator.contacts.find(fields, findContactSuccess, findContactError, options);
    }
</script>

HTML 5/JQuery Mobile

<!---------------------------------- Main Page --------------------------------------->
<div data-role="page" id="main">
	<div data-role="header" data-position="fixed">
		<h1 id="appTitle"></h1>
	</div>
	<div data-role="content">	
	<ul data-role="listview" data-inset="true" data-filter="true">
		<li><a href="#contactsCap" data-transition="slide">Contacts</a></li>			
	</ul>
	</div>
</div>

<!---------------------------------- Contacts ---------------------------------------->	
<div data-role="page" data-add-back-btn="true" back-btn-text="back" id="contactsCap">
	<div data-role="header">
		<h1>Contacts Functions</h1>
	</div>
	<div data-role="content">
		<ul data-role="listview" data-inset="true">
			<li><a href="#addContactPage" >Add Contact</a></li>
			<li><a href="#findContactPage" onclick="getFindContactReady();">Find Contact</a></li>
		</ul>
		
		<div id="contactsProperties" class="mesgBox hideIt"></div>
	</div>
</div>

<!---------------------------------- Contacts: Add ----------------------------------->
<div data-role="page" data-add-back-btn="true" back-btn-text="back" id="addContactPage">
	<div data-role="header">
		<h1>Add Contact</h1>
	</div>
	<div data-role="content">
		<div id="addContactProperties"></div>
		<div data-role="fieldcontain" class="ui-hide-label">
			<form>
				<label for="displayName">Display Name</label>
				<input type="text" name="displayName" id="displayName" value="" placeholder="Display Name"/>

				<label for="givenName">Given Name</label>
				<input type="text" name="givenName" id="givenName" value="" placeholder="Given Name"/>

				<label for="familyName">Family Name</label>
				<input type="text" name="familyName" id="familyName" value="" placeholder="Family Name"/>
									
				<label for="phoneNumber">Home Phone number</label>
				<input type="text" name="phoneNumber" id="phoneNumber" value="" placeholder="Phone Number"/>
			</form>
		</div>				
		<button onclick="addContact();">Add Contact</button>
	</div>
</div>


<!---------------------------------- Contacts: Find ---------------------------------->
<div data-role="page" data-add-back-btn="true" back-btn-text="back" id="findContactPage">
	<div data-role="header">
		<h1>Find Contact</h1>
	</div>
	<div data-role="content">
		<form id="findContactForm">
			<div data-role="fieldcontain" class="ui-hide-label">
				<label for="searchName">Search by Name</label>
				<input type="text" name="searchName" id="searchName" value="" placeholder="Name"/>
			</div>
		</form>
		<button onclick="findContact();">Find Contact</button><br/>
		<div data-role="collapsible-set" id="findContactProperties"></div>
	</div>
</div>