[eluser]flyenig[/eluser]
Ok i was reading this tutorial:
http://net.tutsplus.com/tutorials/javasc...te-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 from the jquery ui?(most important)
How can i convert this to codeigniter format(i think i can do this but all help is great
)
here is the code from that website
getfriends.php
Code:
<?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
Code:
<!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>
<scr1pt type="text/javascript" src="js/jquery-1.4.2.min.js"></scr1pt>
<scr1pt type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></scr1pt>
<scr1pt 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>
</scr1pt>
Please help, Thanks