Question

I’ve a jQuery UI autocomplete dropdown, I want to select one of the options, after that selection selected option’ll be disabled/hidden. For example: I have {“good”,”better”,”best”} select “better”, and autocomplete suggestion list will be {“good”,”best”}.

Thanks in advance.

Here detailed example (thanks to @Whitaker)

<input id="myElement" />​
var result; // should be array
$("#myElement").autocomplete({
    source: function( request, response ) {
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "autocomplete.php",
            data: {
                  startsWith: request.term
            },
            async:false,
            success: function( data ) {
                result = data; // to do array assign process - not shown here
                response($.ui.autocomplete.filter(result, request.term)); 
            }   
        }); 
    }, 
    select: function(event, ui) {  
        var index = $.inArray(ui.item.value, result); 
        result.splice(index, 1); 
    }
});

jQuery ui splice() method works for static list, but I meet interesting point when debug the code that AJAX get method refresh result every click to input element. Is there any way that should work in client side? (without changing .php)

Answer 1

Without more context its a bit tough to provide a good example, but if your example is all you need, this should work:

var src = ['good', 'better', 'best'];
$("#auto").autocomplete({
    source: function(request, response) {
        response($.ui.autocomplete.filter(src, request.term));
    },
    select: function(event, ui) {
        var index = $.inArray(ui.item.value, src);
        src.splice(index, 1);
    }
});

Example: http://jsfiddle.net/LSMvS/