Ajax Autocomplete – Part 2 – with name and value

In the previous post Ajax Autocomplete – Jquery PHP Mysql Johnny and Tariq asked how to get the id. With some changes we can store the value in a hidden field.

Please refer the previous post before reading this…

–

HTML

Add a hidden field in the form.

<div id="content">
	<form autocomplete="off">
		<p>
			Course Name <label>:</label>
			<input type="text" name="course" id="course" />
			<input type="button" value="Get Value" />
			<input type="hidden" name="course_val" id="course_val" />
		</p>
		<input type="submit" value="Submit" />
	</form>
</div>

–

PHP

Pass both the id and course name in the result.

//filename: get_course_list.php
require_once "config.php";
$q = strtolower($_GET["q"]);
if (!$q) return;

$sql = "select DISTINCT course_name as course_name, course_id from course where course_name LIKE '%$q%'";
$rsd = mysql_query($sql);
while($rs = mysql_fetch_array($rsd)) {
	$cid = $rs['course_id'];
	$cname = $rs['course_name'];
	echo "$cname|$cid\n";
}

–

Javascript

Set the value in the hidden field after the selection. Here set the mustMatch option to true if you want to get only existing course name.

<script type="text/javascript" src="../lib/jquery.js"></script>
<script type='text/javascript' src='../jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="../jquery.autocomplete.css" />

<script type="text/javascript">
$().ready(function() {

	$("#course").autocomplete("get_course_list.php", {
		width: 260,
		matchContains: true,
		mustMatch: true,
		selectFirst: false
	});

	$("#course").result(function(event, data, formatted) {
		$("#course_val").val(data[1]);
	});
});
</script>

Demo & Download

DEMO Here
Download Source
Cheers!