jquery autocomplete get id as selected label

StackOverflow https://stackoverflow.com/questions/23683051

Question

I am using JQuery autocomplete to get data from database in php. I am getting correct result from database as I type keyword. But, I want id of that data separate (because I don't want id in the label itself). My JQUERY CODE lokks like this:

$( "#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 Backend:

$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);

The problem is how can I put id in html other than label itself, when user selects particular suggestion. I want to put id in this HTML container:

<input type='hidden' name='referrer_id' id='referrer_id' />
Was it helpful?

Solution 

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

OTHER TIPS

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top