How can i load data from ajax to Chosen jquery?

jquery chosen ajax autocomplete example
jquery magicsearch ajax
jquery chosen select option dynamically
how to autocomplete data on multiple fields with jquery and ajax
select2 alternative
multi select boxes pillbox
jquery chosen remove selected option
jquery chosen refresh after ajax

I have use chosen at http://harvesthq.github.io/chosen/ . Ok, i testing it load data from ajax . I founding anywhere, maybe no someone success with them.

<script src="theme/js/jQuery-2.1.3.min.js"></script>
    <link href="theme/chosen_v1.4.2/chosen.css" rel="stylesheet" />
    <script src="theme/chosen_v1.4.2/chosen.jquery.js"></script>
      <script type="text/javascript" charset="utf-8">
       $(document).ready(function () {
           $(".cb_bu_info").chosen({
               width: "95%",
               source: function (data) {
                   $.ajax({
                       type: "POST",
                       url: "../BUS/WebService.asmx/LIST_BU",
                       contentType: "application/json; charset=utf-8",
                       dataType: "json",
                       success: function (data) {
                           $("#cb_info").html('');
                           //$.each($.parseJSON(data.d), function (idx, obj) {
                           $.each(data, function (idx, obj) {
                               $("#cb_info").append('<option value="' + obj.BU_ID + '">' + obj.BU_NAME + '</option>');
                           });  
                          //$("#cb_info").trigger("liszt:updated");
                       },
                       error: function (data) {
                           console.log(data.d);
                       }
                   });
               }
           });

           $("#cb_info").trigger("liszt:updated");
        });
    </script>
<select id="cb_info" class="cb_bu_info"></select>

After checking out the Chosen docs, there seems to not be a "source" option. What you need to do is first run your Ajax call, then fill your select options. Once the select is all filled, then run Chosen on that select element.

I would use the following JS code:

var url = "../BUS/WebService.asmx/LIST_BU";
$.getJSON(url, function(json){
    var $select_elem = $("#cb_info");
    $select_elem.empty();
    $.each(json, function (idx, obj) {
        $select_elem.append('<option value="' + obj.BU_ID + '">' + obj.BU_NAME + '</option>');
    });
    $select_elem.chosen({ width: "95%" });
})

How to load data from ajax to Chosen Jquery? · Issue #2428 , I found more time about this but seem it's not have answer. $(".cb_bu_info").​chosen({ source: function () { $.ajax({ type: "POST", url: ". After checking out the Chosen docs, there seems to not be a "source" option. What you need to do is first run your Ajax call, then fill your select options. Once the select is all filled, then run Chosen on that select element.


Ok, After some time with the help of suggestions from everybody, I have done

 function load_cb_info() {
            $.ajax({
                type: "POST",
                url: "../BUS/WebService.asmx/LIST_BU",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    $("#cb_info").html('');
                    $.each($.parseJSON(data.d), function (idx, obj) {
                    //$.each(data, function (idx, obj) {
                        $("#cb_info").append('<option value="' + obj.BU_ID + '">' + obj.BU_NAME + '</option>');
                    });
                    $("#cb_info").trigger("liszt:updated");
                    $("#cb_info").chosen({ width: "95%" });
                },
                error: function (data) {
                    console.log(data.d);
                }
            });
        }

And , I think this is an answer and everyone else can find it .Thank you.

Ajax support in chosen to load data · Issue #952 · harvesthq/chosen , How we can implement ajax support to chosen for getting data from remote server as user types , because I need to load more than 5000 records Hi Chadneiro, look, when you use Chosen Plugin, Jquery hides your original  Developing ajax-chosen. In order to install development dependencies, you can run in the ajax-chosen directory: npm install -d ajax-chosen is written in Coffeescript, so there is a Cakefile provided that will perform all necessary tasks for you. Simply run cake to see all available commands.


I have changed your jsfiddle. Try this out http://jsfiddle.net/GaganJaura/by4d528c/2/

I have moved the chosen() to bottom.

$("#cb_info").empty();
$.each(data, function (idx, obj) {
    $("#cb_info").append('<option value="' + obj.BU_ID + '">' + obj.BU_NAME + '</option>');
}); 
  $("#cb_info").trigger("liszt:updated");

$("#cb_info").chosen();

jQuery Chosen plugin, Which was worked on drop-down populate data using Ajax call but somehow it was not render proper CSS after updating drop-down data. jQuery load() Method. The jQuery load() method is a simple, but powerful AJAX method.. The load() method loads data from a server and puts the returned data into the selected element.


You can try as follows it works for me

$.ajax({
        type: "POST",
        url: url,
        data: formData,
        processData: false,
        contentType: false,
        success:function(data){
            if($.trim(data) != "no"){
                $("#PROGRAM_ID").html(data);
                $("#PROGRAM_ID").trigger("chosen:updated");
            }               
        }
    });

PHP, jquery chosen populate ajax, jquery chosen refresh after ajax, jquery chosen ajax php example, jquery chosen ajax search, jquery chosen ajax load. In this step, we will write code for getting ajax data from database using  Chosen ajax addition. We use chosen at work. Works great, but one day we needed it to do some server side calls. So I quickly wrapped the plugin with some jQuery magic and chosen ajax addition was born. Although it doesn't fit with the progressive enhancement ideals of chosen.. it was born quickly and it does what we need it to do for the time


try this. it works for me. please pay attention to the bold text

Ext.Ajax.request({
url:'<?php echo base_url()."index.php/";?>ttemuan31a/cari_divisi',
method:'post',
params:{

        divisi:vdivisi

    },
success:function(data)
{
    $("#divisi").chosen();
        //document.getElementById('detail_divisi').innerHTML=response.responseText;
    $('#divisi').empty();

    $.each(JSON.parse(**data.responseText**), function(i, item) {
        $('#divisi').append('<option value="'+item.id+'">'+item.namadivisi+'</option>');
        $("#divisi").trigger("chosen:updated");
    });
    }
});
}

jQuery Chosen select box called via AJAX not formatting properly , They both format properly using the chosen plugin if I load either page directly. select name=siteId data-placeholder="Choose a site. Jquery Ajax-Chosen Simple Demo Tutorial Well well well i am here again with a new post about this cool plugin named Ajax-Chosen. I dont know if you already used it or not but i am going describe it and demonstrate a little post of data using mvc4. you can use whatever you want cause is pure html plus jquery.


Make user friendly select element with Chosen - jQuery, The Chosen jQuery plugin makes your HTML select element more <script src="​https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery. To set default text on single option <select> add an empty <option> and specify data-placeholder Previous Post Load Content on Page Scroll with jQuery and AJAX. How we can implement ajax support to chosen for getting data from remote server as user types , because I need to load more than 5000 records in dropdown and this going to be a very bulky operation.So i want to fetch data by ajax call as user types in chosen text box.


How to Auto populate dropdown with jQuery AJAX, Sometimes it requires to auto populate data on the element based on With jQuery AJAX you can easily implement this and you don't require to I load the script in XAMPP , PHP Version 7.0.18, php version 4.7.0, and the  Note: Prior to jQuery 3.0, the event handling suite also had a method named .load(). Older versions of jQuery determined which method to fire based on the set of arguments passed to it. Older versions of jQuery determined which method to fire based on the set of arguments passed to it.


Ajax (remote data), If no data-placeholder value is present, it will default to "Select an Option" or "​Select Some Options" depending on whether the select is single or multiple. You can  I am using the js version of chosen and firing the function with $(".chosen").chosen();. my problem is that I am using panels that open and close and when you doc read or window.load, like another modifying js script, the select does not exist so your have to fire the script when you slideDown the div in a function.