Autocomplete Email using jQuery

[seanieboy02]

Morning All - I've had this on mine for a while and it's saved a lot of time (and errors) with email addresses. Hope it helps.

Page: inc\header.inc.php
Code: After the CSS files have been defined

Code: Select all

<link rel="stylesheet" href="<?php echo HESK_PATH; ?>inc/additional.css" type="text/css" media="screen"/>

<script src="http://code.jquery.com/jquery-latest.js"></script>

Page: admin\new_ticket.php
Code: Replace the table code under the Contact Info section.

Code: Select all

<table border="0" width="100%">
	<tr>
	<td style="text-align:right" width="150"><?php echo $hesklang['name']; ?>: <font class="important">*</font></td>
	<td width="80%"><input type="text" name="name" size="40" maxlength="30" value="<?php if (isset($_SESSION['as_name'])) {echo stripslashes(hesk_input($_SESSION['as_name']));} ?>" <?php if (in_array('name',$_SESSION['iserror'])) {echo ' class="isError" ';} ?> /></td>
	</tr>
    <script src="<?php echo HESK_PATH; ?>inc/fill_email.js" type="text/javascript"></script>
	<tr>
	<td style="text-align:right" width="150"><?php echo $hesklang['email']; ?>: <font class="important">*</font></td>
	<td width="80%"><input id="emailString" type="text" name="email" size="40" maxlength="50" onkeyup="lookup(this.value);" value="<?php if (isset($_SESSION['as_email'])) {echo stripslashes(hesk_input($_SESSION['as_email']));} ?>" />
    </td>
	</tr>
    <tr>
    	<td>&nbsp;</td>
        <td>
        	<div class="suggestionsBox" id="emailSuggestions" style="display: none;"> 
 				<img style="position: relative; top: -12px; left: 30px;" src="upArrow.png" alt="upArrow" />
 				<div class="suggestionList" id="autoEmailSuggestionsList"></div>
       		</div>
         </td>
     </tr>
	</table>

Page: admin\rpc.php
Code: Whole Page
Changes: Database Information - update these to match your own settings

Code: Select all

<?php
	
	// PHP5 Implementation - uses MySQLi.
	// mysqli('localhost', 'yourUsername', 'yourPassword', 'yourDatabase');
	$db = new mysqli('127.0.0.1', 'USERNAME' ,'PASSWORD', 'DATABASE_NAME');
	
	if(!$db) {
		// Show error if we cannot connect.
		echo 'ERROR: Could not connect to the database.';
	} else {
		// Is there a posted query string?
		//if(isset($_POST['queryString'])) {
			
			//Set Variables
			if(isset($_POST['emailQueryString'])) {
				$emailString = $db->real_escape_string($_POST['emailQueryString']);
			}
			// Is the string length greater than 0?
			
			//Email String
				if(strlen($emailString) >0) {
					// Run the query: We use LIKE '$queryString%'
					// The percentage sign is a wild-card, in my example of countries it works like this...
					// $queryString = 'Uni';
					// Returned data = 'United States, United Kindom';
					
					// YOU NEED TO ALTER THE QUERY TO MATCH YOUR DATABASE.
					// eg: SELECT yourColumnName FROM yourTable WHERE yourColumnName LIKE '$queryString%' LIMIT 10
					
					$query = $db->query("SELECT * FROM hesk_tickets WHERE email LIKE '$emailString%' GROUP BY email LIMIT 10 ");
					if($query) {
						// While there are results loop through them - fetching an Object (i like PHP5 btw!).
						while ($result = $query ->fetch_object()) {
							// Format the results, im using <li> for the list, you can change it.
							// The onClick function fills the textbox with the result.
							
							// YOU MUST CHANGE: $result->value to $result->your_colum
							echo '<li onClick="fillEmail(\''.$result->email.'\');">'.$result->email.'</li>';
						}
					} else {
						echo 'ERROR: There was a problem with the Email query.';
						}
				}
		/*}else {
			echo 'There should be no direct access to this script!';
		}*/
	}
?>

Page: inc\fill_email.js
Code: Whole File

Code: Select all

function lookup(emailString) {
		if(emailString.length == 0) {
			// Hide the suggestion box.
			$('#emailSuggestions').hide();
		} else {
			$.post("rpc.php", {emailQueryString: ""+emailString+""}, function(data){
				if(data.length >0) {
					$('#emailSuggestions').show();
					$('#autoEmailSuggestionsList').html(data);
				}
			});
		}
	} // lookup
	
	function fillEmail(thisValue) {
		$('#emailString').val(thisValue);
		setTimeout("$('#emailSuggestions').hide();", 200);
	}

Page: inc\additional.css
Code: Whole Page
Changes: modify the colours to suit your needs.

Code: Select all

/* Extra CSS for additional items */

/* JQuery for filling in email addresses */
.suggestionsBox {
	position: relative;
	left: 30px;
	margin: 10px 0px 0px 0px;
	width: 350px;
	background-color: #74A62B;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border: 2px solid #000;
	color: #fff;
	}
	
.suggestionList {
	margin: 0px;
	padding: 0px;
}
	
.suggestionList li {
	
	margin: 0px 0px 3px 0px;
	padding: 3px;
	cursor: pointer;
}

.suggestionList li:hover {
	background-color: #659CD8;
}

[Klemen]

Thanks for sharing! If you have a database of your customer emails this would indeed be handy.

However, care should be given when using this as you don't want to reveal stored emails in your database to a third party visitor.

[steve]

Thanks for this!

Ill be implementing this into my Hesk installation.

[rgaspar]

Thanks for this.

Regards.

Ricardo Gaspar