Jquery Chosen plugin - dynamically populate list by Ajax

Question

Im trying to build my dropdown menu using the plugin Chosen for Multiple Select   Here s to behavior I m based on   http   jsfiddle net JfLvA   So  instead of having 3 harcoded  lt  option   in my select  I want this list to be the values of a json array populated by an ajax request  This will be triggered by autocomplete   So  if the user type  car   im sending the letter via an ajax call  and im getting back an array like that      id   2489   name   carrie     id   2490   name   Caroline     id   2491   name   Carole     The code     function          chzn-select   chosen        chzn-select-deselect   chosen  allow single deselect true         chzn-choices input   autocomplete      source  function  request  response             ajax             url    change name autocomplete   request term                dataType   json             success  function  data                  response    map  data  function  item                        ul chzn-results   append   lt li class  active-result  gt     item name     lt  li gt                                         Result   I type  car   in the dropdown Im getting  No result for car  and then I have all my results  as I want   1  Why I m I getting the  No result  message  cause I can see in my json array and inside my list that I m getting results    -----------------------------   When I delete  car  and enter  sam   The results for  sam  are showing after the  car  results   Basically  I see the result for both  instead of just having the result of my current search   2  Im I suppose to clear the ul on keyUp   Thought the plugin was doing that already   -----------------------------   When I click on a name to actually select it and add it into the select  Im getting a javascript error inside the chosen js file  item is undefined  item selected   true   line 732  the link to the plugin  http   harvesthq github com chosen chosen chosen jquery js  and it s not adding anything inside the select   3  No idea why this is happening   -----------------------------   Do you guys have any idea on what I m I doing something wrong  I m completly stuck here      Oh and by the way  I dont mind changing the plugin source  as it s the only place where I m using it

User · Accepted Answer

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   lt li class  active-result  gt     item name     lt  li gt

User · Answer

var object       lstValue chosen   find   chosen-choices   find  input type  text     0   var  KeyCode   event which    event keyCode  if   KeyCode    37  amp  amp   KeyCode    38  amp  amp   KeyCode    39  amp  amp   KeyCode    40          if  object value                  var SelectedObjvalue   object value          if  SelectedObjvalue length  gt  0                var obj     value  SelectedObjvalue                var SelectedListValue       lstValue   val                var Uniqueid       uniqueid   val                   ajax                   url    Admin GetUserListBox SelectedValue     SelectedListValue     amp Uniqueid     Uniqueid                  data    value  SelectedObjvalue                    type   GET                   async  false                  success  function  response                        if  response length  gt  0                                lstValue   html                              var options                                                             each response  function  i  obj                                options      lt option value      obj Value      gt     obj Text     lt  option gt                                                            lstValue   append options                               lstValue   val SelectedListValue                               lstValue   trigger  chosen updated                            object value   SelectedObjvalue                                                           error  function  xhr  ajaxOptions  thrownError                          jAlert  Error  Please  check the data      Deactivate User                        alert error StatusText

User · Answer

Chosen API has changed a lot   If non of the solution given works for you  you can try this one  https   github com goFrendiAsgard gofrendi chosen ajaxify  Here is the function      USAGE         some input id   chosen       chosen ajaxify  some input id    http   some url com contain         REQUEST WILL BE SENT TO THIS URL  http   some url com contain some term     AND THE EXPECTED RESULT  WHICH IS GOING TO BE POPULATED IN CHOSEN  IS IN JSON FORMAT    CONTAINING AN ARRAY WHICH EACH ELEMENT HAS  value  AND  caption  KEY  EX        value   1    caption   Go Frendi Gunawan      value   2    caption   Kira Yamato     function chosen ajaxify id  ajax url       console log     chosen-search input   autocomplete          div     id     chosen  chosen-search input   keyup function            var keyword     this  val            var keyword pattern   new RegExp keyword   gi               div     id     chosen ul chosen-results   empty                  id  empty              ajax               url  ajax url   keyword              dataType   json               success  function response                      map  just as in functional programming     Other way to say  foreach                    map response  function item                             id  append   lt option value      item value      gt     item caption     lt  option gt                                               id  trigger  chosen updated                       div     id     chosen   removeClass  chosen-container-single-nosearch                       div     id     chosen  chosen-search input   val keyword                      div     id     chosen  chosen-search input   removeAttr  readonly                       div     id     chosen  chosen-search input   focus                       put that underscores                    div     id     chosen  active-result   each function                        var html     this  html                          this  html html replace keyword pattern  function matched                           return   lt em gt     matched     lt  em gt                                                                                       Here is your HTML    lt select id  ajax select  gt  lt  select gt    And here is your javasscript      This is also how you usually use chosen     ajax select   chosen  allow single deselect true  width  200px   search contains  true       And this one is how you add AJAX capability chosen ajaxify  ajax select    server php keyword       For more information  please refer to https   github com goFrendiAsgard gofrendi chosen ajaxify how-to-use

User · Answer

The solution of  Ashivad mostly fixed my problem  but I needed to make this one-line addition to prevent the input to be erased after the results dropdown is displayed  in success callback of the autocomplete added this line after triggering chosen updated   combosearchChosen find  input   val request term    Complete listing  var  combosearch       data-combosearch     if    combosearch length      return     var options    combosearch data  options    console log  combosearch    combosearch  options     combosearch chosen     no results text   quot Oops  nothing found  quot     width   quot 60  quot          actual chosen container var  combosearchChosen    combosearch next      combosearchChosen find  input   autocomplete     source  function  request  response           ajax         url  options remote source    quot  amp query  quot    request term        dataType   quot json quot         beforeSend  function               ul chosen-results   empty                   success  function  data             response    map  data  function  item  index                combosearch append   lt option value  quot     item id     quot  gt     item label     lt  option gt                           combosearch trigger  chosen updated             combosearchChosen find  input   val request term

User · Answer

If you are generating select tag from ajax  add this inside success function       chosen   chosen      Or  If you are generating select tag on clicking add more button then add       chosen   chosen      inside the function

User · Answer

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   lt option value  blah  gt     item name     lt  option gt                                              CHOSEN INPUT FIELDID   trigger  chosen updated

User · Answer

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

User · Answer

This might be helpful  You have to just trigger an event       DropDownID   trigger  liszt updated      Where  DropDownID  is ID of  lt select gt    More info here  http   harvesthq github com chosen

User · Answer

Like Vicky suggested  Select2 comes with the AJAX features inbuilt and looks like a great plugin    If you dont want to switch from Chosen  try AJAX-Chosen https   github com meltingice ajax-chosen

User · Answer

The chosen answer is outdated  same goes to meltingice  ajax-chosen plugin   With Select2 plugin got many bugs which is i can t resolve it   Here my answer for this question   I integrated my solution with function trigger after user type  Thanks to this answer   https   stackoverflow com a 5926782 4319179     setup before functions   var typingTimer                   timer identifier   var doneTypingInterval   2000     time in ms  2 seconds    var selectID    YourSelectId        Hold select id   var selectData                    data for unique id array      on keyup  start the countdown           selectID     chosen  chosen-choices input   keyup function              Change No Result Match text to Searching                selectID     chosen  no-results   html  Searching               selectID     chosen  chosen-choices input   val                   clearTimeout typingTimer      Refresh Timer on keyup        if          selectID     chosen  chosen-choices input   val                  typingTimer   setTimeout doneTyping  doneTypingInterval      Set timer back if got value on input                      user is  finished typing   do something   function doneTyping             var inputData           selectID     chosen  chosen-choices input   val       get input data          ajax           url   YourUrl            data   data  inputData           type  POST           dataType   json           beforeSend  function                 Change No Result Match to Getting Data beforesend                   selectID     chosen  no-results   html  Getting Data              selectID     chosen  chosen-choices input   val                        success  function  data                    iterate data before append             map  data  function  item                     matching data eg  by id or something unique  if data match   lt option gt  not append - else  append  lt option gt                 This will prevent from select the same thing twice              if   inArray item attr hash selectData     -1                     if not match then append in select                       selectID   append   lt option id    item id    data-id      item id    gt     item data     lt  option gt                                                             Update chosen again after append  lt option gt                    selectID   trigger  chosen updated                                    Chosen event listen on input change eg  after select data   deselect this function will be trigger           selectID   on  change   function             get select jquery object     var domArray           selectID   find  option selected            empty array data     selectData            for  var i   0  length   domArray length  i  lt  length  i                Push unique data to array  for matching purpose        selectData push    domArray i   data  id                     Replace select  lt option gt  to only selected option             selectID   html domArray           Update chosen again after replace selected  lt option gt              selectID   trigger  chosen updated

User · Answer

If you have two or more selects and use Steve McLenithan s answer  try to replace the first line with       CHOSENINPUTFIELDID chosen  gt  div  gt  div input   autocomplete     not remove suffix   chosen

User · Answer

The Chosen plugin does not automatically update its list of options when the OPTION elements in the DOM change   You have to send it an event to trigger the update   Pre Chosen 1 0          chzn-select   trigger  liszt updated     Chosen 1 0         chosen-select   trigger  chosen updated     If you are dynamically managing the OPTION elements  then you ll have to do this whenever the OPTIONs change   The way you do this will vary - in AngularJS  try something like this    scope  watch    function         return element find  option   map function     return this value    get   join            function         element trigger  liszt updated

[javascript] Jquery Chosen plugin - dynamically populate list by Ajax

Examples related to javascript

Examples related to jquery

Examples related to jquery-plugins

Examples related to jquery-chosen