search

websemantics / Image-Select

Image Select is an extension of Chosen, a jQuery plugin that makes long, unwieldy select boxes much more user-friendly. It provides image support for Single and Multi select HTML tags.
http://websemantics.github.io/Image-Select
MIT License
148 stars 44 forks source link

Using Chosen's search box causes images to disapeer until dropdown is reopened #29

Open UntouchedWagons opened 8 years ago

UntouchedWagons commented 8 years ago

If you go to http://testing.mcresourcecalculator.info/ and choose "Minecraft Forge" in the first drop down, then enter 'Water' into the search box of the second drop-down, the water icon disappears until you close the drop down. Clearing the search box does not restore the images either. I'm using Image-Select 1.7 with Chosen 1.5.1, jQuery 2.2.3

iLLysion commented 8 years ago

I have the same issue

websemantics commented 8 years ago

This has been an issue with Chosen for a while, check https://github.com/websemantics/Image-Select/issues/19 .. there is a pending fix https://github.com/harvesthq/chosen/pull/2373 .. I've asked for an update, stay tuned,

iamcal commented 7 years ago

fix will now be either https://github.com/harvesthq/chosen/pull/1626 or https://github.com/harvesthq/chosen/pull/2356

maybe. one day.

websemantics commented 7 years ago

Thanks for the update @iamcal

donni106 commented 7 years ago

Is there something new on this? Images also disappear if the search box is disabled but the user presses some keys. Only up/down are working as they are proper inputs to navigate the list items.

shablam commented 6 years ago

Hi, I thought I would help out. I am using this plugin here: http://websemantics.github.io/Image-Select/. So for me I like that plugin but same issue the image would disappear after searching. I am capable of programming although not setup for this hard core debugging. In any case I managed to make the image come back after the search. It works.. because I can do it.

You have to hack the chosen.jquery.js. You can minimize it afterwords if you want.
Ok, so the file ImageSelect.jquery.js already has a "chosen:filter" event listener in place. So I added in a trigger for the filter event. Then it simply calls the the function in the ImageSelect file after the search result is updated. Keep in mind I am not taking into account groups or anything like that ok. This is just for my needs and maybe this will work fine for you as well.

Look for the function below and replace it with this. Version 1.8.2, chosen.jquery.js. I am sure there is some genius to make this all work better but this works for me.

Chosen.prototype.update_results_content = function(content) {
        this.search_results.html(content);
        return this.form_field_jq.trigger("chosen:filter", { //9-29-17 added in to replace images after search.
            chosen: this
        });
};

I don't have time for a jsfiddle. Hope this helps you. It is super easy to do but took several hours to figure out. I did make custom css for my needs but you can hack that as well. Take it easy.