jQuery自动完成获取ID作为选定标签答案

【问题标题】：jquery autocomplete get id as selected labeljQuery自动完成获取ID作为选定标签
【发布时间】：2014-07-04 04:26:08
【问题描述】：

我正在使用 JQuery 自动完成从 php 中的数据库中获取数据。当我输入关键字时，我从数据库中得到了正确的结果。但是，我希望该数据的 id 分开（因为我不希望标签本身中有 id）。我的 JQUERY CODE 是这样的：

$( "#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);

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

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

【问题讨论】：

标签： javascript php jquery jquery-ui autocomplete

【解决方案1】：

$( "#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
    }
});

【讨论】：

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

【解决方案2】：

$("#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;
                    }
                });

【讨论】：

【解决方案3】：

<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>

【讨论】：