Estoy usando el menú desplegable de autocompletar siguiendo este enlace a continuación,

https://www.jqueryscript.net/form/tags-autocompletar-desplegable.html

Lo siguiente es mi código HTML y jQuery,

 <div class="pf-field"> <input type="text" name="categories" id="categories" name="categories" class="tags_input"> </div> <script> $(function(){ var data = [ 'History', 'Civics', 'Geogpraphy', 'Science', 'Economics', 'Arts', 'Chemistry', 'Mathematics', 'Language', 'Computer', ]; $(".tags_input").tagComplete({ keylimit: 1, hide: false, autocomplete: { data: data } }); }); </script>

Todo funciona correctamente hasta aquí. Los usuarios pueden agregar tantos valores como quieran. Sin embargo, quiero limitar esto al permitir que el usuario no agregue más o menos de 5 valores.

 $(function(){ var $profile = $('#profile'); if($profile.length){ $profile.validate({ errorElement: 'span', rules:{ categories:{ required: true } }, messages:{ categories:{ required:'Categories are mandatory!' } } }) } })

Además, esta misma validación de jQuery funciona bien con otros campos de entrada, pero no funciona con este menú desplegable de autocompletar.

¿Pueden ayudarme, por favor? He encontrado una solución a esto desde la semana pasada.