Question

I am trying to display some cities in autocomplete using jquery and when any one selects the city then set the destination id to hidden field . i am using web service to get data for ajax call .

here is my webservice method :

 [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public List<BALDestinations> AuotExtenderDestination(string destinationname)
    {
        DataSet ds=objDestination.GetDestination(destinationname);
        List<BALDestinations> result = new List<BALDestinations>();
        foreach (DataRow dr in ds.Tables[0].Rows)
        {
            BALDestinations b = new BALDestinations();
            b.City = dr["City"].ToString();
            b.DestinationId = dr["DestinationId"].ToString();
            result.Add(b);
        }
        return result;
    }

and this is the code of my jquery autocomplete textbox extender

<script type="text/javascript">
    $(document).ready(function () {
        SearchText();
        $('#btnSearch').click(function () {
            alert($("#hiddenAllowSearch").val());
        });
    });  
    function SearchText() {
        $(".txtdest").autocomplete({
            //   source: $local_source,
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "WebService.asmx/AuotExtenderDestination",
                    data: "{'destinationname':'" + $('.txtdest').val() + "'}",
                    dataType: "json",
                    success: function (data) {
                      response(data.d);                      
                    },
                    error: function (result) {
                        alert("Error");
                    }
                });
            },
            focus: function (event, ui) {
                $(".txtdest").val(ui.item.label);
                return false;
            },
            select: function (event, ui) {
                $(".txtdest").val(ui.item.label);
                $("#hiddenAllowSearch").val(ui.item.value);
                return false;
            }
        });
    } 
</script>

undefined appear in text box when we type anything there

Answer 1

If the properties on the class that you are returning from your web service aren’t label, and value, then the jQuery Autocomplete code will be trying to read values from non-existent properties, and thus your undefined issue arises.

If you don’t want to change your class properties, you can set up the autocomplete to look at your actual property names. Instead of just calling response(data.d), you can map your class properties to label and value manually before sending it through the response function:

response($.map(data.d, function (item) {
    return { 
        label: item.City, 
        value: item.DestinationId
    };
}));