jquery autocomplete- add data to list on select event

Question

I am using jquery autocomplete with a json datasource.

This is my code: clientId, clientName are the id's of the input fields.

$("#clientId").autocomplete({
        source: function(request, response){
            var clientId=request.term;
            $.ajax({
                type:"GET",
                url:"getClients.htm?ClientId=" + clientId +"&ClientName=",
                dataType:"json",
                success: function(data){
                    if(pageCountClientId == 0){
                data.push({clientId:"More Options",clientName:"More Options"});
                        pageCountClientId++;
                    }
                    else{
                data.push({clientId:"Previous Options",clientName:"Previous Options"});
                        pageCountClientId++;
                    }
                    response($.map(data,function(value,key){
                        return{
                            label:value.clientId,
                            value:value.clientName
                        };
                    }));                                    
                }
            });
        },
        minLength: 1,
        select: function(event, ui){
            if(ui.item.value == "More Options"){
                pageCountClientId++;
            }
            else if(ui.item.value == "Previous Options"){
                pageCountClientId--;
            }
            else{
                $("#clientName").val(ui.item.value);
                $("#clientId").val(ui.item.label);
                $("#clientName").attr("disabled", "disabled"); 
                $("#clientId").attr("disabled", "disabled");
            }
            return false;
        },
    });

So now when the user clicks on the 'More Options' value, in the select event I want to get the next set of results and display it in the dropdown which appears. How to make it happen. any pointers in the right direction will be appreciated.

Andrew Whitaker · Accepted Answer · 2013-10-08 19:57:44Z

1

I think this should be a matter of calling search from the select handler. As you may have discovered, however, this doesn't work quite right.

You should be able to make it work by adding a small timeout:

select: function(event, ui){
    if(ui.item.value == "More Options"){
        pageCountClientId++;
        setTimeout($.proxy(function () {
            $(this).autocomplete('search', this.value);
        }, this), 1);
    }
    else if(ui.item.value == "Previous Options"){
        pageCountClientId--;
        setTimeout($.proxy(function () {
            $(this).autocomplete('search', this.value);
        }, this), 1);
    }
    else{
        $("#clientName").val(ui.item.value);
        $("#clientId").val(ui.item.label);
        $("#clientName").attr("disabled", "disabled"); 
        $("#clientId").attr("disabled", "disabled");
    }
    return false;
},

Example: http://jsfiddle.net/fTFkY/2/

The example uses a local source but simulates an AJAX request. Hopefully this helps!

answered Oct 8, 2013 at 19:57

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kayzid Over a year ago

Thank you Andrew!! it worked. I was able to make an ajax call with the proxy function and search function of Auto complete

Collectives™ on Stack Overflow

jquery autocomplete- add data to list on select event

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related