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.

Answer 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!