Jquery Chosen plugin - dynamically populate list by Ajax

You can dynamically populate a list via AJAX using the excellent Select2 plugin. From my answer to "Is there a way to dynamically ajax add elements through jquery chosen plugin?":

Take a look at the neat Select2 plugin, which is based on Chosen itself and supports remote data sources (aka AJAX data) and infinite scrolling.

try this:

$('.chzn-choices input').autocomplete({  source: function( request, response ) {    $.ajax({      url: "/change/name/autocomplete/"+request.term+"/",      dataType: "json",      beforeSend: function(){$('ul.chzn-results').empty();},      success: function( data ) {        response( $.map( data, function( item ) {          $('ul.chzn-results').append('<li class="active-result">' + item.name + '</li>');        }));      }    });  }});

Ashirvad's answer no longer works. Note the class name changes and using the option element instead of the li element. I've updated my answer to not use the deprecated "success" event, instead opting for .done():

$('.chosen-search input').autocomplete({    minLength: 3,    source: function( request, response ) {        $.ajax({            url: "/some/autocomplete/url/"+request.term,            dataType: "json",            beforeSend: function(){ $('ul.chosen-results').empty(); $("#CHOSEN_INPUT_FIELDID").empty(); }        }).done(function( data ) {                response( $.map( data, function( item ) {                    $('#CHOSEN_INPUT_FIELDID').append('<option value="blah">' + item.name + '</option>');                }));               $("#CHOSEN_INPUT_FIELDID").trigger("chosen:updated");        });    }});