getting id from auto complete??
Ok i was reading this tutorial:http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/
and I am trying to apply that to my current project, but im having trouble.
How can i get the id from the selected person?
here is the code from that website
getfriends.php
- <?php
//connection information
$host = "localhost";
$user = "root";
$password = "your_mysql_password_here";
$database = "test";
$param = $_GET["term"];
//make connection
$server = mysql_connect($host, $user, $password);
$connection = mysql_select_db($database, $server);
//query the database
$query = mysql_query("SELECT * FROM friends WHERE name REGEXP '^$param'");
//build array of results
for ($x = 0, $numrows = mysql_num_rows($query); $x < $numrows; $x++) {
$row
= mysql_fetch_assoc($query);
$friends[$x] = array("name" => $row["name"]);
}
//echo JSON to page
$response = $_GET["callback"] . "(" . json_encode($friends) . ")";
echo
$response;
mysql_close($server);
?>
and the front page
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<
html>
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<
title>jQuery UI Autocomplete</title>
<
link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.custom.css">
<
link rel="stylesheet" type="text/css" href="css/autocomplete.css">
</
head>
<
body>
<
div id="formWrap">
<
form id="messageForm" action="#">
<
fieldset>
<
legend>New message form</legend>
<
span>New Message</span>
<
label id="toLabel">To:</label>
<
div id="friends" class="ui-helper-clearfix">
<
input id="to" type="text">
</
div>
<
label>Subject:</label>
<
input id="subject" name="subject" type="text">
<
label>Message:</label>
<
textarea id="message" name="message" rows="5" cols="50"></textarea>
<
button type="button" id="cancel">Cancel</button>
<
button type="submit" id="send">Send</button>
</
fieldset>
</
form>
</
div>
<
scrpt type="text/javascript" src="js/jquery-1.4.2.min.js"></scrpt>
<
scrpt type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></scrpt>
<
scrpt type="text/javascript">
$(function()
{
//attach autocomplete
$("#to").autocomplete({
//define callback to format results
source: function(req, add){
//pass request to server
$.getJSON("friends.php?callback=?", req, function(data) {
//create array for response objects
var suggestions = [];
//process response
$.each(data, function(i, val){
suggestions
.push(val.name);
});
//pass array to callback
add(suggestions);
});
},
//define select handler
select: function(e, ui) {
//create formatted friend
var friend = ui.item.value,
span = $("<span>").text(friend),
a = $("<a>").addClass("remove").attr({
href
: "[removed]",
title: "Remove " + friend
}
).text("x").appendTo(span);
//add friend to friend div
span.insertBefore("#to");
},
//define select handler
change: function() {
//prevent 'to' field being updated and correct position
$("#to").val("").css("top", 2);
}
}
);
//add click handler to friends div
$("#friends").click(function(){
//focus 'to' field
$("#to").focus();
});
//add live handler for clicks on remove links
$(".remove", document.getElementById("friends")).live("click", function(){
//remove current friend
$(this).parent().remove();
//correct 'to' field position
if($("#friends span").length === 0) {
$("#to").css("top", 0);
}
}
);
});
</
scr1pt>
</
body>
</
scrpt>
Please help, Thanks :)