Question

我正在使用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' />

Answer 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
    }
});

Answer 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;
                    }
                });

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

jquery autocomplete将id作为选定标签

3 个答案: