你好
我遵循了本教程,其中使用jquery UI生成令牌Facebook,例如:
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/
我的问题是我需要通过Json传递两个值:ID和NAME:
服务器端脚本如下所示:
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;
服务器端脚本的回显为:
([{"name":"dupont","id":"34998"},{"name":"castro","id":"34996"},{"name":"castelbajac","id":"34995"}])
(这正是我所需要的)
现在,我正在传递“名称”数组,但不需要传递“ id”,它需要是数据库中具有相应ID的隐藏输入,对php进行调用的html页面如下所示:
//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);
}
});
所以基本上是您在其中看到评论的地方:“ // define select handler”,这需要完成一些操作,但是我做不到!
我添加了一行:
$(“< input />”,{value:“ id”,类型:“ hidden”,name:“ id”}).appendTo(span);
但它不会获取我的数组“ id”,因此不提供任何帮助.
问候
解决方法:
您的代码应为:
更新为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()
});
});
>注意:假设您的json代码如下所示:
[{ “名称”: “杜邦”, “ID”: “34998”},{ “名称”: “卡斯特罗”, “ID”: “34996”},{ “名称”: “Castelbajac的”, “标识”: “34995”}]
>常用读物:http://jqueryui.com/demos/autocomplete/#remote-jsonp