jQuery Chosen search not working with dynamically populated options (PHP/MySQL)

Question

I have a select menu with options populated via PHP and MySQL. The select dropdown menu worked fine before implementing jQuery Chosen, but eventually the list of options is going to be very long so I'm using Chosen so the search functionality is included. The options are populating in the dropdown, however my problem is that the search does not recognize any of the dynamically populated options. I get "No results match..." on available options. I made sure that the plugin was working by hard-coding some options in, and those were indeed searchable.

Any ideas as to what might be going on?

Answer 1

I know this question is old but I just pulled my hair out over this exact issue and wasn't able to find any help online ( and this question doesn't have an accepted answer yet so... ).

Anyway, here's my scenario:

My "select" input was generated programatically via PHP on page load, chosen was initializing just fine ( and actually functioning properly on 2 other drop-downs on the same form ) but on this one particular drop-down when I searched for a value ( one that I could plainly see in the list ) I would get a "no results matching..." message if I typed more than 1 character.

The issue actually turned out to be related to the formatting of my php source code. It seems that any line breaks ( and possibly leading / trailing whitespace ) in the "option" tag's inner HTML breaks the search functionality in "Chosen". For example:

This PHP code:

<select>
    <option>
        <?php print( "inner HTML" ); ?>
    </option>
    <option>
        <?php print( "more inner HTML" ); ?>
    </option>
</select>

Was outputting this HTML:

<select>
    <option>
        inner HTML
            </option>
    <option>
        more inner HTML
            </option>
</select>

Which broke the search functionality but when I changed my source to this:

<select>
    <option><?php print( "inner HTML" ); ?></option>
    <option><?php print( "more inner HTML" ); ?></option>
</select>

resulting in this HTML:

<select>
    <option>inner HTML</option>
    <option>more inner HTML</option>
</select>

Everything worked as expected :D

Hope that helps anyone else who's googling around for the answer to this issue.

Answer 2

Easiest way to do it is using trigger("chosen:updated");

Heres a demo

http://jsfiddle.net/Q8GEp/