CODEWITHSUNDEEP
javascriptjqueryjquery-uiautocomplete
Jan
Jan

Reputation: 6828

problem with jquery ui`s autocomplete select callback (1.8)

With this code:

function setupRow(event, ui) {
        var textbox, // how do i get to the textbox that triggered this? from there
        // on i can find these neighbours:
        hiddenField = textbox.next(), 
        select = textbox.parents('tr').find('select');

        textbox.val(ui.item.Name);
        hiddenField.val(ui.item.Id);
        $.each(ui.item.Uoms, function(i, item){
            select.append($('<option>' + item + '</option>'));
        });             
        return false;
    }
    function setupAutoComplete(){
        var serviceUrl = "/inventory/items/suggest";
        $("input.inputInvItemName").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: serviceUrl,
                    data: request,
                    dataType: "json",
                    success: function(data) {
                        response($.map(data.InventoryItems, function(item) {
                            return {
                                value: item.Name
                            };
                        }));
                    },
                    select: function(event, ui) {
                        setupRow(event, ui);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            minLength: 3,
            delay: 500
        });
    }

everything seems ok. Problem is the select handler never fires, not even the anonymous function that wraps my original delegate setupRow for debugging purposes is ever called.

anyone can see my error?

I also left a question in the comment: how do I get to the textbox that had the autosuggestion. Cannot use id here, because these text boxes are multiples and generated on the fly, interactively. Or is there another way to do the same thing?

Thanks for any help!

Upvotes: 0

Views: 2277

Answers (3)

Jan
Jan

Reputation: 6828

ok, got a step closer by using 

inputs.bind("autocompleteselect", setupRow);

now setupRow fires.

Now it seems, that the success callback transforms the data, I get returned.I need to find a way, to both display the right value in the dropdown, without destroying the requests response...

Any ideas?

Upvotes: 0

Reigel Gallarde
Reigel Gallarde

Reputation: 65254

OP point of view

var textbox, // how do i get to the textbox that triggered this? from there
        // on i can find these neighbours:

My Point of view

have you tried, 

var textbox = $(event.target);

or you can do this,

OP point of view

select: function(event, ui) {
       setupRow(event, ui);
},

My point of view

select: setupRow;

then

var textbox = this; // just a guess... wait..

Upvotes: 1

Kai
Kai

Reputation: 2987

anyone can see my error?

I think you forgot to put ';' .

$.ajax({
                    url: serviceUrl,
                    data: request,
                    dataType: "json",
                    success: function(data) {
                        response($.map(data.InventoryItems, function(item) {
                            return {
                                value: item.Name
                            }
                        }));

Or is there another way to do the same thing?

I think u are using the jquery ui autocomplete plugin.If yes, you can retreive like this.

$('.ui-autocomplete-input')

Otherwise, you can set a specific class to those textboxes and access those textbox through that class.

Upvotes: 0

Related Questions