Deform select widget with autocompletion support?

[Andreas Jung]

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

I am looking for a Deform *select* widget with autocompletion support.
Right now we are using the Select2.js module for having our long options
list (8000 items) searchable but the overall behavior
of the UI became sluggish with Select2.js (especially when using
this in combination with a sequence of widget (1...N)...using
an autocompletion string widget is not an option because we need
the key-value pair mapping and not only the visible title of an option.
Thoughts?

Andreas
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.11 (Darwin)
Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org/

iQGUBAEBAgAGBQJQ9VYTAAoJEADcfz7u4AZjQo8LwN5mZe9hVEyDdt3blFeJbzXI
vaR8lYdoy8eNFBpnaKX1JkFluPGTkMR0PIw/h0LB9DYMny5k5LvjKvqVPx2WeZEW
PXdf4IFlM3ciAhkedDX9d600YNhd7eu8g52hNk/lYHVZxX9/sQ3kRjVk1zeLVigl
UCOIMxRUB3+4u2gs/pYTCqwTlxIQV5PfherdN9DWGwZ7d8DmiE/he/ymskb4bYGA
C8lpPrT6KizxfyPKqQ5TW9F0BezCaNe0gwMtXC/goitGwiPDnPUZCfCNMuFyCRA9
mOLSowwJe9//1XDSmJbKma0GAPk/E8/W+NA/zwJn2ny7P9zt5T0Wq3eXXb818w7v
zJg3RRiATmaXRzt2D5RyMmHjFpLceie/RTFBhMfE6YD2iYchhH8eUrrJBZuxAfEy
1b6OEhrci1Whsx0i5/EHWEPPPqb/csPr6fZ2la7DLLE79PgbyPkf/pC3SElGycIH
MNrhYCraTnUx8gnBD09aCKFiLO/WgJg=
=ZhuP
-----END PGP SIGNATURE-----

[Andreas Jung]

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Andreas Jung wrote:
> I am looking for a Deform *select* widget with autocompletion
> support. Right now we are using the Select2.js module for having our
> long options list (8000 items) searchable but the overall behavior of
> the UI became sluggish with Select2.js (especially when using this in
> combination with a sequence of widget (1...N)...using an
> autocompletion string widget is not an option because we need the
> key-value pair mapping and not only the visible title of an option.
> Thoughts?

Resolved this problem myself. I used the "Chosen" jQuery plugin
which is pretty fast compared to Select2.js.

Andreas
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.11 (Darwin)
Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org/

iQGUBAEBAgAGBQJQ9WWyAAoJEADcfz7u4AZjTecLvjuFWqzlaCD2scnwG8smrl4l
akwsT8lG1LS7navyV9BspATtljpS2C/JtTrJO5gAI731a4zBi7K54yTrqK5bpxBk
DxXooEYcum+zS2o6P1QkhWgPsZ/KhK5Zjn0IVIvlYqkEewrVIQt5cPbUZtN/vGo6
m+R/uTSX6O7m+fESFNpinWH0TsYyjWxofoiOixt6OvU5OOfXR5V7wa2llfLJEEbH
yXG2CUFrQyG77khl2TxqW1Hd+J2DQmE2w1zJbCYXO8GH/zf96aAbRhD/4tGSaXO/
ZI4M5zmuXIWU4m4FPLGnTe+yR7BzAjloPEGCLucmqyuR20GocM+O28XIZvmkP5iF
slTwhGP43Bq7jdUmFqH9xSirpx1uq9qlXwLabQn0xjvze2NoVBcnCp7hhgVxo2NN
iXTLabtgRyRqSRLaF33wrJaz+wUCFZjHOLihrdQNamkcP33zx27XHB+EDeYtTbkv
KnzJQRQVIbyMDL6JfHjwvdILVDOdw5c=
=9SUk
-----END PGP SIGNATURE-----

[magoarcano]

Hi Andreas,

Are you still using Chosen?

I have a form with a Selectbox with more than 3000 items, and a sequence field of mapping that contains other selectbox of 4000 items.

Thanks

Hernán

[Jo G]

We used the select2 widget but added in ajax support. We created our own widget and template which was based on the select2 template. You need to be using the latest version of deform, otherwise the ajax option is not supported by the js files. The urls return data based on the input from the user.

<div tal:define="

     name name|field.name;

     style field.widget.style;

     oid oid|field.oid;

     css_class css_class|field.widget.css_class;

     optgroup_class optgroup_class|field.widget.optgroup_class;

     multiple multiple|field.widget.multiple;

     content_type field.widget.content_type;

     key field.widget.key;

     this_object_id field.widget.this_object_id;

     this_object_in_list field.widget.this_object_in_list;"

     tal:omit-tag="">

   <style>

    .form-control .select2-choice {

        border: 0;

        border-radius: 2px;

    }

    .form-control .select2-choice .select2-arrow {

        border-radius: 0 2px 2px 0;

    }

    .form-control.select2-container {

        height: auto !important;

        padding: 0px;

    }

    .form-control.select2-container.select2-dropdown-open {

        border-color: #5897FB;

        border-radius: 3px 3px 0 0;

    }

    .form-control .select2-container.select2-dropdown-open .select2-choices {

        border-radius: 3px 3px 0 0;

    }

    .form-control.select2-container .select2-choices {

        border: 0 !important;

        border-radius: 3px;

    }

   </style>

  <input type="hidden" name="__start__" value="${name}:sequence"

         tal:condition="multiple" />

  <select tal:attributes="

          name name;

          id oid;

          class string: form-control ${css_class};

          data-placeholder field.widget.placeholder|None;

          multiple multiple;

          style style;">

  </select>

  <script type="text/javascript">

   deform.addCallback(

     '${field.oid}',

     function(oid) {

     //this string needs to be in quotes as $ in the template means something different in jquery

     var $initial_value = '${cstruct}';

     console.log($initial_value);

        var $select = $('#' + oid);

        $select.select2({

         placeholder: "${str(field.widget.placeholder).replace('"','\\"')|""}",

         allowClear: true,

         ajax: {

                 url: "/admin/getter",

                 dataType: 'json',

                 delay: 250,

                 data: function (params) {

                   return {

                     key:"${key}",

                     content_type:"${content_type}",

                     this_object_id:"${this_object_id}",

                     this_object_in_list:"${this_object_in_list}",

                     query: params.term,

                     page: params.page

                   };

                 },

                 processResults: function (data, params) {

                   revised_data = []

                   for (i = 0; i < data.length; i++) {

                      result = {id:data[i]['id'], text:data[i]['text']}

                      revised_data.push(result)

                   }

                   params.page = params.page || 1;

                   console.log(data);

                   return {

                     results: revised_data,

                     pagination: {

                       more: (params.page * 30) < data.total_count

                     }

                   };

                 },

                 cache: true

               },

        minimumInputLength: 2,

       });

       var $option = $('<option selected>Loading...</option>').val($initial_value); //this never displays as we update it immediately with the actual value

       $select.append($option).trigger('change'); // append the option and update Select2

       $.ajax({ // make the request for the selected data object

         data:{initial_id:$initial_value},

         url: '/admin/get_initial',

         dataType: 'json'

          }).then(function (data) {

          // Here we should have the data object

          $option.text(data[0].text).val(data[0].id); // update the text that is displayed (and maybe even the value)

          $option.removeData(); // remove any caching data that might be associated

          $select.trigger('change'); // notify JavaScript components of possible changes

        });

     }

   );

  </script>

  <input type="hidden" name="__end__" value="${name}:sequence"

         tal:condition="multiple" />

</div>

[Andreas Jung]

4 years ago…no idea why I needed that…currently not my agenda.

-aj

--
You received this message because you are subscribed to the Google Groups "pylons-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pylons-discus...@googlegroups.com.
To post to this group, send email to pylons-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pylons-discuss/a2c7bde2-7e0a-4fd6-bdc1-52fc1082081b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.