ajaxChosen plugin will not work

Question

I've been tinkering all afternoon with ajaxChosen, because I love Chosen, but my option value sets are getting too large. I've also experimented with select2, but it's just too darn slow.

http://harvesthq.github.io/chosen/ https://github.com/meltingice/ajax-chosen

So, I've got the newest version of chosen (1.1.0), and the latest version of ajaxChosen. I initialize ajaxChosen as follows:

$("#add_people").ajaxChosen({
    type: 'GET',
    minTermLength: 3,
    afterTypeDelay: 300,
    dataType: 'json',
    url: 'http://cmcrm.chocolata.be/content/people.php?action=list_options'
  }, function (data) {
    var results = [];
    $.each(data, function (i, val) {
    results.push({ value: val.value, text: val.text });
  });
  return results;
});

My script has access to this URL, and there is no XSS-prevention going on since my script is on the same domain as the remote url.

The format of my JSON is as follows:

[{"value":3,"text":"Valerietje Mortelmans (Actief)"},{"value":9,"text":"Olivier Hopchet (Actief)"},{"value":13,"text":"Wieland Rits (Actief)"},{"value":14,"text":"Melissa Seiffert van der Merwede (Actief)"},{"value":15,"text":"Guillaume de Valensart (Actief)"},{"value":18,"text":"Xavier Cloet (Actief)"},{"value":19,"text":"Brent Lammens (Actief)"},{"value":21,"text":"Coralie Libert (Actief)"},{"value":22,"text":"Laetitia Theus (Actief)"},{"value":23,"text":"Evelien Mollet (Actief)"},{"value":24,"text":"Feya Smets (Actief)"},{"value":25,"text":"Michelle Warneke (Actief)"},{"value":26,"text":"Carolyn Spaenjaers (Actief)"},{"value":27,"text":"Evelien Raes (Actief)"},{"value":28,"text":"Ange Luyten (Actief)"}]

I see that chosen has initialized but when I start typing I immediately get "No search results for KEYWORD". There are no errors in my console.

So what's the problem? Does the plugin just not work? Or am I doing something wrong?

---

I've created a jsfiddle here http://jsfiddle.net/4796y/

Can anyone assist so that I don't waste more time on this? :-) Would love to use this. Thanks!

Answer 1

After some further research I found out that this plugin isn't actively supported anymore.

It seems that Michael Perrin forked it to be compatible with 1.X versions of chosen: https://github.com/michaelperrin/ajax-chosen/

Michael's fork works, but still is a bit buggy. In the example of Michael, my main problem was that some typed letters were being dropped after a matching result was found. Unexpected behavior!

Maybe it would be best to give Select2 another chance, since its users claim that they can circumvent the lagginess of the plugin, when dealing with large lists.

This plugin is supported actively and is widely used. Maybe it would be best to lay our eggs in that basket ;-)

The issues about slowness of Select2 can be found here.

Answer 2

I had the same problem, no Ajax request launched. After a bit of investigation, I found that if your select is empty, chosen disable the search function.

Add this to chosen options : disable_search_threshold: -1

your code should look like this :

$("selector").ajaxChosen({
    // AJAX & AjaxChosen OPTIONS
    type: 'GET',
    url: "/My/url.php",
    dataType: 'json'
},
function (data) {
    // CALLBACK
    var results = [];
    // [...]
    return results;
}, 
{
    // CHOSEN OPTIONS
    disable_search_threshold: -1
});