Ajax for a Select2 with a long list of elements

Comments

• admin

  May 2020

  You can, but it will require a little bit of javascript code. Also, if the options values for the field are automatically being added by FUEL because of a relationship (e.g. foreign_key), you can prevent that overhead by removing the relationship before rendering the form_fields().

  public function form_fields($values = array(), $related = array())
  {
      unset($this->foreign_keys['my_foriegn_key']);
      $fields = parent::form_fields($values, $related);
      return $fields;
  }
  

  To add the javascript fo the page, there is some information on how to do that (there are various ways). There is also a section about ajaxing in option results which it sounds like you'll want:
  https://docs.getfuelcms.com/general/javascript
• weblar

  May 2020 edited May 2020

  Ok. It's working now.
  I needed to update the select2 plugin to the new version.
  I removed the field from the foreign_keys array. Then I assign the "select" type (not the "select2" type) to it.
  Then I added the following code to the form_fields method:

  $fields['id_pop']['js'] = "
      <script>
          $(document).ready(function() {                  
              $('#id_pop').select2({
                  language: 'es',
                  placeholder: 'Escriba un título',   
                  minimumInputLength: 3,                  
                  ajax: {
                      url: 'http://ivac.local/admin/p.php',
                      dataType: 'json',
                      data: function (params) {
                          var query = {
                              term: params.term
                          }                           
                      return query;
                      }
                  },                                              
              });
          });
      </script>
  ";
  

  In the case that the select2 library is not loaded, I have to load it.
  I needed to add an option to the "select" field with the previous values when it has one.

  Now a would like to change the p.php testing script by a method in the POP model.

  Thanks for your help!
  Jaime
• marcus_at_localhost

  September 2020

  Quick explanation why Select2 3.x in the current version of Fuel is not working with ajax:

  Select2 expects everything than a <select> field to work with ajax (https://select2.github.io/select2/#data and https://stackoverflow.com/a/16345339/814031) - I don't know if an update to Select2 v4.x has any side effects, but what I'm doing right now, is setting up a custom field, that loads Select2 v3, but renders a hidden form field as recommended in their docs.

  https://gist.github.com/marcus-at-localhost/16262b75a9a82854fd82474de7d0eb47

  I guess both ways - updating to 4.x or working around 3.x limitations has drawbacks.

  If Fuel CMS decides to upgrade to v4 of Select2, this custom field will break (easy to fix though, but...)
  If I upgrade to v4 locally I fall out of sync with Fuel CMS core.
• marcus_at_localhost

  September 2020

  I decided to give Select2 v4 a try and it works alright. I updated the gist with some raw code how to approach it: https://gist.github.com/marcus-at-localhost/16262b75a9a82854fd82474de7d0eb47