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>
On Tuesday, 28 March 2017 19:37:46 UTC+1, magoarcano wrote:
>
> 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
>
> On Tuesday, January 15, 2013 at 11:20:35 AM UTC-3, Andreas Jung wrote:
>>
>> -----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-----
>>
>
--
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 [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/pylons-discuss/14f4f78a-ec82-49b4-bfd2-a2c685739ae2%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
