Javascript jquery自动完成获取id作为所选标签_Javascript_Php_Jquery_Jquery Ui_Autocomplete

Javascript jquery自动完成获取id作为所选标签

javascript php jquery jquery-ui autocomplete

Javascript jquery自动完成获取id作为所选标签,javascript,php,jquery,jquery-ui,autocomplete,Javascript,Php,Jquery,Jquery Ui,Autocomplete,我使用jqueryautocomplete从php中的数据库获取数据。当我键入关键字时，我从数据库中得到正确的结果。但是，我希望该数据的id是分开的（因为我不希望id出现在标签本身中）。我的JQUERY代码如下所示： $( "#referrer" ).autocomplete({ source: function(request, response) { $.ajax({ url: "/ajax/ir_populate_referrer",

我使用jqueryautocomplete从php中的数据库获取数据。当我键入关键字时，我从数据库中得到正确的结果。但是，我希望该数据的id是分开的（因为我不希望id出现在标签本身中）。我的JQUERY代码如下所示：

$( "#referrer" ).autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "/ajax/ir_populate_referrer",
            dataType: "json",
            type: "POST",
            data: {
                keyword: request.term
            },
            success: function(data){
                response( $.map( data, function( item ) {
                    //alert(item.label);
                    return {
                        label: item.label
                    }
                }));
             }
        })
    }
});

PHP后端：

$searchArray = array();
    while($search = $result->fetch()){
        $link = '';
        $link .= $search['id'].', '.$search['cus_firstname'].' '.$search['cus_lastname'].', '.$search['cus_email'].', '.$search['cus_phone1'];

        array_push($searchArray, array('label'=> $link, 'value' => $keyword, 'id'=>$search['id']));
    }

echo json_encode($searchArray);

问题是，当用户选择特定的建议时，如何在html中放置id而不是标签本身。我想将id放入此HTML容器中：

<input type='hidden' name='referrer_id' id='referrer_id' />


身体
{
字体大小：70%；
}
$（文档）.ready（函数（）{
$（“#”）自动完成({
来源：功能（请求、响应）{
$.ajax({
url:“AutoComplete.asmx/AutoCompleteAjaxRequest”，
类型：“POST”，
数据类型：“json”，
contentType:“应用程序/json；字符集=utf-8”，
数据：“{'prefixText'：'”+$（“#”）.val（）+“}”，
成功：功能（数据）{
响应（$.map（$.parseJSON（data.d），函数（项）{
返回{
标签：item.usernamethow，
值：item.UserName，
id:item.UserId
}
}))
}
});
},
选择：功能（事件、用户界面）{
$（“#referer_id”）.val（ui.item.id）；//ui.item.value包含所选标签的id
}
});
});

不过，它并没有给我推荐人id中的值。首先，您是否在ui.item.value中获得id？它只给我标签。没有价值。对不起，已经完成了。实际上，在代码中，我们需要在响应中为value/id添加返回变量。

$( "#referrer" ).autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "/ajax/ir_populate_referrer",
            dataType: "json",
            type: "POST",
            data: {
                keyword: request.term
            },
            success: function(data){
                response( $.map( data, function( item ) {
                    //alert(item.label);
                    return {
                        label: item.label,
                        value: item.value     // EDIT
                    }
                }));
             }
        })
    }
    select: function(event, ui) {
        $("#referrer_id").val(ui.item.value);  // ui.item.value contains the id of the selected label
    }
});

$("#zipsearch").autocomplete({
                    source: function(req,res) {
                        $.ajax({
                            url: "json.php",
                            dataType: "json",
                            type: "GET",
                            data: {
                                term: req.term
                            },
                            success: function(data) {
                                res($.map(data, function(item) {
                                    return {
                                        label: item.label,
                                        value: item.value,
                                        id: item.id
                                    };
                                }));
                            },
                            error: function(xhr) {
                                alert(xhr.status + ' : ' + xhr.statusText);
                            }
                        });
                    },
                    focus: function( event, ui ) {
                       $( "#zipsearch" ).val( ui.item.label );
                        return false;
                      },
                    select: function(event, ui) {
                      alert(ui.item.id);
                      $( "#zipsearch" ).val( ui.item.label );
                      return false;
                    }
                });

<head runat="server">
<title></title>
<link href="Styles/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.js" type="text/javascript"></script>
<style>
    body
    {
        font-size: 70%;
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        $("#<%=TextBox1.ClientID %>").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "AutoComplete.asmx/AutoCompleteAjaxRequest",
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    data: "{ 'prefixText' : '" + $("#<%=TextBox1.ClientID %>").val() + "'}",
                    success: function (data) {
                        response($.map($.parseJSON(data.d), function (item) {
                            return {
                                label: item.UserNameToShow,
                                value: item.UserName,
                                id: item.UserId
                            }
                        }))
                    }
                });
            },
            select: function (event, ui) {
                $("#referrer_id").val(ui.item.id);  // ui.item.value contains the id of the selected label
            }
        });
    });
</script>