jQuery UI的令牌 [英] jquery ui token
问题描述
您好 我按照这个教程至极使用jQuery UI的生成令牌Facebook的喜欢： <一href="http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/" rel="nofollow">http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/
我的问题是我需要传递两个值通的Json：ID和NAME： 在服务器端脚本是这样的：
标题（内容类型：text / html的;字符集= ISO-8859-1，真正的）;
包括：（$ _ SERVER ['DOCUMENT_ROOT']'/ inrees / inrees / communaute /包括/ _db.php'）;
$参数= $ _GET [术语];
$查询=请求mysql_query（SELECT * FROM comm_carnet，in_emails
WHERE carnet_iduser = emails_id
与emails_id！='。$ _ COOKIE ['INREES_ID'。'
与emails_nom REGEXP'^ $参数'）;
//生成结果的数组
为（$ X = 0，$ = numRows行mysql_num_rows（$查询）; $ X＆LT; $ numRows行; $ X ++）{
$行= mysql_fetch_assoc（$查询）;
$朋友[$ X] =阵列（名称=＆GT; $行[emails_nom]，ID=＆GT; $行[emails_id]）;
}
//回声JSON页
。$回应= $ _GET [回调]（json_en code（$的朋友）。）;
回声$反应;
从服务器端脚本的回声：
<$p$p><$c$c>([{"name":"dupont","id":"34998"},{"name":"castro","id":"34996"},{"name":"castelbajac","id":"34995"}])
（至极正是我所需要的）
现在，我传递的名称数组，但没有身份证至极必须是一个隐藏的输入，从数据库，HTML网页，其中调用PHP做看起来像这样对应的ID：
//附加自动完成
$（＃来）。自动完成（{
//定义回调格式结果
来源：功能（REQ，加）{
//传请求的服务器
$ .getJSON（messages_ajax.php？回调=？，REQ，功能（数据）{
//创建阵列响应对象
变种建议= [];
//过程响应
$每个（数据，功能（我，VAL）{
suggestions.push（val.name）;
}）;
//传递数组回调
加（建议）;
}）;
}，
//定义选择处理程序
选择：功能（即，UI）{
//创建格式化的朋友
VAR的朋友= ui.item.value，
跨度= $（＆LT;跨度＆gt;中）。文本（朋友），
一个= $（＆其中a取代;）。addClass（删除）ATTR（{
HREF：JavaScript的：，
标题：删除+的朋友
}）文本（×）appendTo（跨度）。;
$（＆其中;输入/＆gt;中，{
值：ID，
类型：潜伏，
名称：ID
}）appendTo（跨度）。
//添加好友给朋友DIV
span.insertBefore（＃来）;
}，
//定义选择处理程序
变化：函数（）{
// prevent'到'字段被更新和正确的位置
$（＃为）VAL（）。CSS（顶，2）;
}
}）;
//添加单击处理程序为好友格
$（＃的朋友）。点击（函数（）{
//重点向现场
$（＃为）专注（）。
}）;
//添加实时处理程序的删除链接点击
$（删除，的document.getElementById（朋友））。住（点击，函数（）{
//删除当前的朋友
$（本）.parent（）删除（）。
//正确的'到'领域的地位
如果（$（＃的朋友跨越）。长度=== 0）{
$（＃到）的CSS（顶部，0）;
}
}）;
所以基本上你看到的评论：//定义选择处理程序的东西需要做的事情，但我不能做到这一点！
我加了一行：
$（＆LT;输入/＆gt;中，{值：ID，输入：隐藏，名称：ID}）。appendTo（跨度）;
但它不取我的数组身份证，任何帮助是preciated。
关于
您code应该是：
更新随着演示
$（函数（）{
$（＃来）。自动完成（{
//定义回调格式结果
来源：功能（REQ，加）{
//传请求的服务器
$ .getJSON（json.json，REQ，
功能（数据）{
增加（$。图（数据，
功能（项目）{
返回 {
ID：item.id，
标签：item.name，
值：item.name
}
}））;
}）;
}，
//定义选择处理程序
选择：功能（即，UI）{
$（'＆LT;一类=del_friend的href =＃+ ui.item.id +'称号=删除＆GT;+ ui.item.label +'＆LT;跨度＆GT，X＆LT; / SPAN＆GT; +
'＆LT;输入名称=朋友[]类型=隐藏ID =friend_'+ ui.item.id +'值=+ ui.item.id +/＆GT;＆LT; / A＆GT ;'）的insertBefore（'＃为'）;
}，
//定义选择处理程序
变化：函数（）{
$（＃为）VAL（）。
}
}）;
//删除好友
$（'a.del_friend）。住（点击，功能（五）{
即preventDefault（）;
变种friend_id = this.hash.split（'＃'）[1];
警报（friend_id）; // AJAX调用和删除项目由它的编号
$（本）.fadeOut（500）上卸下摆臂（）
}）;
}）;
-
注意：此假设你的JSON code样子：
[{"name":"dupont","id":"34998"},{"name":"castro","id":"34996"},{"name":"castelbajac","id":"34995"}]
- USEFULL写着： http://jqueryui.com/demos /自动完成/＃远程JSONP
hello i have followed this tutorial wich uses jquery UI to generate tokens facebook like: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/
my problem is i need to pass two values thru Json: the ID and the NAME: the server side script looks like this:
header('Content-Type: text/html; charset=iso-8859-1', true);
include($_SERVER['DOCUMENT_ROOT'].'/inrees/inrees/communaute/includes/_db.php');
$param = $_GET["term"];
$query = mysql_query("SELECT * FROM comm_carnet, in_emails
WHERE carnet_iduser=emails_id
AND emails_id!='".$_COOKIE['INREES_ID']."'
AND emails_nom 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["emails_nom"], "id" = > $row["emails_id"]);
}
//echo JSON to page
$response = $_GET["callback"]."(".json_encode($friends).")";
echo $response;
the echo from the server side script is:
([{"name":"dupont","id":"34998"},{"name":"castro","id":"34996"},{"name":"castelbajac","id":"34995"}])
(wich is exactly what i need)
right now i am passing the the "name" array but not the "id" wich needs to be a hidden input with the corresponding id from the database, the html page where the call to the php is done looks like this:
//attach autocomplete
$("#to").autocomplete({
//define callback to format results
source: function (req, add) {
//pass request to server
$.getJSON("messages_ajax.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: "javascript:",
title: "Remove " + friend
}).text("x").appendTo(span);
$("<input />", {
value: "id",
type: "hidden",
name: "id"
}).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);
}
});
so is basically where you see the comment: "//define select handler" that something needs to be done but i cant do it!
i added the line :
$("<input />", {value:"id", type:"hidden", name:"id"}).appendTo(span);
but it does not fetch my array "id", any help is apreciated.
regards
your code should be:
UPDATE With DEMO
$(function() {
$("#to").autocomplete({
//define callback to format results
source: function(req, add) {
//pass request to server
$.getJSON("json.json", req,
function(data) {
add($.map(data,
function(item) {
return {
id: item.id,
label: item.name,
value: item.name
}
}));
});
},
//define select handler
select: function(e, ui) {
$('<a class="del_friend" href="#' + ui.item.id + '" title="remove">' + ui.item.label + '<span>x</span>' +
'<input name="friend[]" type="hidden" id="friend_' + ui.item.id + '" value="' + ui.item.id + '" /></a>').insertBefore('#to');
},
//define select handler
change: function() {
$("#to").val("");
}
});
//delete friends
$('a.del_friend').live('click', function(e) {
e.preventDefault();
var friend_id = this.hash.split('#')[1];
alert(friend_id); //AJAX Call and delete item by it's ID
$(this).fadeOut(500).remove()
});
});
NOTE: this assuming your json code look like:
[{"name":"dupont","id":"34998"},{"name":"castro","id":"34996"},{"name":"castelbajac","id":"34995"}]
- USEFULL READS: http://jqueryui.com/demos/autocomplete/#remote-jsonp
这篇关于jQuery UI的令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
