Question

我有一个有效的查询自动完成代码，可以在输入字母时完成full_name。我想弄清楚的是如何使用full_name来获取user_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);
            }               
        });             
    });

HTML

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

Answer 1

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

jQuery自动完成ID和项目

1 个答案: