jQuery自动完成编号和项目

我有一个正在运行的查询自动完成代码，可以在输入字母时完成full_name。我试图弄清楚的是如何获得user_name以及full_name。我有JSON回来如此：jQuery自动完成编号和项目

[{"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>

来源

2013-10-20 Mike

提供演示请 –

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

来源

2013-10-20 18:45:36 Vidya

我已经看过这个Combobox，但我似乎无法得到它在PhpFox中实施。还有没有一种方法来做到这一点，没有组合框？我想只有一个文本框不是下拉菜单。自动完成应该从我提供的JSON中找到full_name。如果我不尝试将user_id添加到suggestions数组，这将起作用。我的问题是如何从JSON数据中获取两个变量以显示在HTML中？ – Mike

**编辑**我希望full_name出现在下拉列表中以供选择，并且user_id是输入字段的值，但对最终用户不可见。 – Mike

jQuery自动完成编号和项目

回答

相关问题