Autocomplete jQuery自动完成id和项

我有一个工作查询自动完成代码，在输入字母时完成全名。我想弄清楚的是，如何获取与全名匹配的用户id。我有这样的JSON：

[{"full_name":"Matt","user_id":"2"},{"full_name":"Jack","user_id":"9"},{"full_name":"Ace","user_id":"10"},{"full_name":"tempaccount","user_id":"11"},{"full_name":"Garrett","user_id":"26"},{"full_name":"Joe","user_id":"29"},{"full_name":"Raptors","user_id":"32"}]

下面是我的jQuery代码。我使用的是PHPfox框架

$(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) {
        $.ajaxCall('phpfoxsamplee.auto', 'startsWith='+req.term)                        
            .done(function( data ) {
        //create array for response objects
        var suggestions = [];
        var data = $.parseJSON(data);

        //process response
        $.each(data, function(i, val){                              
        //suggestions.push(val.full_name,val.user_id); (This works and shows both the full name and id in the dropdown.  I want the name to be visible and the ID to goto a hidden input field)
        suggestions.push({
                id: val.user_id, 
                name: val.full_name
        });
        });

        //pass array to callback
        add(suggestions);
        });
    },

    //define select handler
    select: function(e, ui) {

        //create formatted friend
        alert(ui.item.full_name); //Trying to view the full_name (doesn't work)
        alert(ui.item.id); // trying to view the id (doesn't work)
        var friend = ui.item.full_name, (doesn't work)
        //var friend = ui.item.value,  (This works if I do not try to push labels with values)
        span = $("<span>").text(friend),
        a = $("<a>").addClass("remove").attr({
        href: "javascript:",
        title: "Remove " + friend
        }).text("x").appendTo(span);

        //add friend to friend div
        span.insertBefore("#to");
        $("#to").attr("disabled",true);
        $("#to").attr('name','test').attr('value', 'yes');
        $("#to").hide();

    },

    //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();
    $("#to").removeAttr("disabled");
    $("#to").show();
    //correct 'to' field position
    if($("#friends span").length === 0) {
        $("#to").css("top", 0);
            }               
        });             
    });

$（函数（）{
//附加自动完成
$（“#到”）。自动完成({
//定义回调以格式化结果
来源：功能（请求、添加）{
//将请求传递给服务器
//$.getJSON（“friends.php？callback=？”，req，函数（数据）{
$.ajaxCall（'phpfoxsamplee.auto'，'startsWith='+req.term）
.完成（功能（数据）{
//为响应对象创建数组
var建议=[]；
var data=$.parseJSON（数据）；
//过程响应
$.each（数据，函数（i，val）{
//suggestions.push（val.full_name，val.user_id）；（此选项有效，并在下拉列表中显示全名和id。我希望名称可见，id转到隐藏的输入字段）
建议。推({
id:val.user\u id，
姓名：val.full_name
});
});
//将数组传递给回调函数
增加（建议）；
});
},
//定义选择处理程序
选择：功能（e、ui）{
//创建格式化的朋友
警报（ui.item.full_name）；//尝试查看全名（无效）
警报（ui.item.id）；//尝试查看id（无效）
var friend=ui.item.full_name（不工作）
//var friend=ui.item.value（如果我不尝试推送带有值的标签，则此操作有效）
span=$（“”）。文本（朋友），
a=$（“”）.addClass（“删除”）.attr({
href:“javascript:”，
标题：“删除”+好友
}).文本（“x”）。附录（span）；
//将好友添加到好友div
span.插入前（“#至”）；
$（“#至”）.attr（“已禁用”，真）；
$（“#to”）.attr（'name'，'test'）.attr（'value'，'yes'）；
$（“#to”）.hide（）；
},
//定义选择处理程序
更改：函数（）{
//防止“to”字段被更新并纠正位置
$（“#至”）.val（“”.css（“顶部”，2）；
}
});
//将单击处理程序添加到friends div
$（“#朋友”）。单击（函数（）{
//焦点“到”字段
$（“#to”）.focus（）；
});
//为删除链接上的单击添加活动处理程序
$（“.remove”，document.getElementById（“friends”）.live（“单击”，函数）（）{
//删除当前好友
$（this.parent（）.remove（）；
$（“#to”）.removeAttr（“禁用”）；
$（“#to”）.show（）；
//纠正“至”字段位置
如果（$（“#朋友跨度”）.length==0）{
$（“#至”）.css（“顶部”，0）；
}               
});             
});

HTML

考虑一下JQuery自动完成。它不是一个标准的小部件，但是你可以粘贴它们的源代码。它可以让你捕获与文本选择相对应的值。

我已经看过这个组合框，但我似乎无法在PhpFox中实现它。没有组合框也有办法做到这一点吗？我只想有一个text box不是下拉框。自动完成应该从我提供的JSON中找到全名。如果我不尝试将用户id添加到建议数组中，这会起作用。我的问题是如何使JSON数据中的两个变量都显示在HTML中？编辑我希望全名显示在下拉列表中以供选择，用户id显示在列表中输入字段的值，但最终用户不可见。请提供演示

<div id=friends class=ui-help-clearfix> 
     <input id='to' type=text name='player[" . $num . "][name]'></input>
</div>