Question

I’m working on this jQuery Autocomplete thing and I can’t get the item selected from the result set to appear in the textbox after clicking on it.

As you can see, the code returns and item, i see the drop down. (I’d post a pic but i’m new and can’t =/ )
but after I click on it, nothing happens: (Joe Blow goes away, not shown but result is just a 99 in the field)

here is my code:

var techNumber = $('#<%= txtTechNumber.ClientID %>');
        techNumber.autocomplete({
            source: function(request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: '<%=ResolveUrl("~/Service/ServiceHelpdesk/") %>srvWebServiceRepository.asmx/FetchTechnicianList',
                    data: "{ 'techNumber':'" + request.term + "' }",
                    dataType: "json",
                    dataFilter: function(data) { return data; },
                    success: function(data) {
                        if (data.d != null) {
                            response($.map(data.d, function(item) {
                                return {
                                    label: highlight(item.TechNumber, request.term) + " - " + item.TechFirstName + " " + item.TechLastName,
                                    value: item.TechID
                                }
                            }))
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.responseText);
                    },
                    select: function(event, ui) {
                        techNumber.val(ui.item);
                    }
                });
            },
            minLength: 1
        });

Answer 1

Instead of using ui.item, use ui.item.label in your select handler. It probably wouldn’t hurt to preventDefault the event either. Finally, make sure the definition for the select handler is inside the options object passed to the widget (previously it was in the AJAX options object):

var techNumber = $('#<%= txtTechNumber.ClientID %>');
        techNumber.autocomplete({
            source: function(request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: '<%=ResolveUrl("~/Service/ServiceHelpdesk/") %>srvWebServiceRepository.asmx/FetchTechnicianList',
                    data: "{ 'techNumber':'" + request.term + "' }",
                    dataType: "json",
                    dataFilter: function(data) { return data; },
                    success: function(data) {
                        if (data.d != null) {
                            response($.map(data.d, function(item) {
                                return {
                                    label: highlight(item.TechNumber, request.term) + " - " + item.TechFirstName + " " + item.TechLastName,
                                    value: item.TechID
                                }
                            }))
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.responseText);
                    }
                });
            },
            select: function(event, ui) {
                event.preventDefault();
                techNumber.val(ui.item.label);
            }            
            minLength: 1
        });