Mobile support for chosen

Chosen is a jQuery plugin which makes select boxes more user-friendly. Currently, support is disabled on mobile devices for various reasons. Enabling the support requires a hack in the source code for now in the AbstractChosen.browser_is_supported function to return true when the userAgent finds Android or iPhone/iPad. You can download the patched version at the bottom (or detail) of the article. The current version is 1.1.0

Chosen will now be enabled on mobile, but touching the element will not work nicely since the plugin doesn't listen for the touchstart event to trigger the functionality. Opening the select box requires touching the element for at least a couple of seconds, which isn't really user-friendly. Luckily, there's an easy way to get around this by writing a couple lines of javascript:

    // Chosen touch support.
    if ($('.chosen-container').length > 0) {
      $('.chosen-container').on('touchstart', function(e){
        e.stopPropagation(); e.preventDefault();
        // Trigger the mousedown event.
        $(this).trigger('mousedown');
      });
    }

That's it, fully functional chosen support on mobile devices!

Attachment Size
chosen.jquery.min_.js.txt 26.33 KB

Comments

Andrey on Thu, 22/03/2018 - 16:13

Thank god he created you! I spend 4 hours trying solve this problem!

saeed mohseni on Sun, 03/06/2018 - 10:03

Thank You so much...

Chris on Thu, 07/06/2018 - 11:07

Do you know how to make this work for version 1.2?

I think that those lines of code is what I am looking for.

AbstractChosen.browser_is_supported=function({return"Microsoft Internet Explorer"===window.navigator.appName?document.documentMode>=8:/iP(od|hone)/i.test(window.navigator.userAgent)?!1:/Android/i.test(window.navigator.userAgent)&&/Mobile/i.test(window.navigator.userAgent)?!1:!0}

How to enable the mobile support?

Thank you.

Iliyan on Thu, 07/06/2018 - 11:49

Thank you !

Krish karthick R on Thu, 05/07/2018 - 08:19

Thanks It S very Useful for me.....

Akshay on Mon, 24/09/2018 - 00:26

Thanks a lot!!!
It works very well.

Juliano Rodrigues on Tue, 06/11/2018 - 21:38

I'm forking the project and I'm trying to build a new version because this came from bower components in my project. We're anyone able to build from a fork project?

cristian on Wed, 02/01/2019 - 20:40

Genio!

robert on Wed, 30/01/2019 - 17:44

I noticed that on mobile
1. there is no way to remove via search-choice-close if the chosen container is not active (dropdown open)
2. You can't add/select the second item. You need to click outside and then click again on the chosen container.

saunia kz on Wed, 28/08/2019 - 06:24

Thanks a lot

Hugo Lignier on Mon, 30/09/2019 - 16:39

Hello,
I do not know if the support is still active but I use one of the latest version of GravityForm and unfortunately this script does not work: /
Do you know how to do it ?

Thanks!

Bhavin Shah on Thu, 24/10/2019 - 11:56

Your hack is superb and it works excellent if I work on the version 1.1.0. Chosen has progressed and now they are on version 1.8.7. I would request you please let us know what all have you changed so that we can change the same and use or else please change the required on the current version

Igor on Wed, 13/11/2019 - 17:54

It is perfect! Thanks for the commitment! greetings from Brasil

Add reply

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
Have you written a response to this? Let me know the URL by sending a webmention.