Tell us what you are trying to do?
a user meta edit (form cred) select field, populated with wpt_field_options from a cpt (ex. street)
there is around 3000+ streets in the list.
a toolset_select2 is on the select field.
i even have a custom mather i've built.
full select2 have an adapter for query, getting the "results" and be able to create pagination.
the purpose is to not render all options before inputing any search terms, and by that lower page load
how i can limit the rendering results like with:
add_filter('cred_select2_ajax_get_potential_relationship_parents_query_limit', function($limit){
return 5;
});
OR use the "query" adaptor like in full select2, like:
query: function(query) {
var pageSize,
results,
that = this;
pageSize = 5;
results = [];
if (query.term && query.term !== '') {
// HEADS UP; for the _.filter function i use underscore (actually lo-dash) here
results = _.filter(that.data, function(e) {
return e.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0;
});
} else if (query.term === '') {
results = that.data;
}
query.callback({
results: results.slice((query.page - 1) * pageSize, query.page * pageSize),
more: results.length >= query.page * pageSize,
});
}
any kind of a solution or direction how to work with what i've got to achieve:
pagination OR limit OR manipulating select2 rendering -->
for less rendering when opening select (before term input inserted)
add_filter( 'wpt_field_options', 'street_select_options', 10, 3);
function street_select_options( $options, $title, $type ){
switch( $title ){
// the relevant select field -
case 'User Street ID':
$oldoptions = $options;
$options = array();
$args = array(
'post_type' => 'street',
'posts_per_page' => -1,
'post_status' => 'publish');
$posts_array = get_posts( $args );
foreach ($posts_array as $post) {
$city_id = toolset_get_related_post($post->ID, 'city-street');
$city_name = get_the_title($city_id);
$options[] = array(
'#value' => $post->ID,
'#title' => $post->post_title . ", " . $city_name,
);
}
break;
case 'pickup branch':
$options = array();
$args = array(
'post_type' => 'branch',
'posts_per_page' => -1,
'post_status' => 'publish');
$posts_array = get_posts( $args );
foreach ($posts_array as $post) {
$options[] = array(
'#value' => $post->ID,
'#title' => $post->post_title
);
}
break;
}
return $options;
}
CRED form js code:
[/php]
jQuery(document).on('cred_form_ready', function() {
jQuery('[name="wpcf-user-street-id"]').toolset_select2({
width: '100%',
matcher: customMatch,
placeholder: 'חיפוש...'
});
jQuery('[name="wpcf-user-street-id"]').on('toolset_select2:select', streetUpdated);
var selected_street_id = jQuery('[name="wpcf-user-street-id"]').val();
var e = {"params": {"data": {"id": selected_street_id}}};
streetUpdated(e);
});
[/php]
when the select results & search is "opened" (the fake select2 "dropdown") the matcher runs
my toolset_select2 custom matcher function:
// params.term : the input from the search, initially empty = =="".
// data.text : select option text (or the options from a data source)
function customMatch(params, data) {
// If there are no search terms, return all of the data
if (jQuery.trim(params.term) === '') {
return data;
}
// Do not display the item if there is no 'text' property
if (typeof data.text === 'undefined') {
return null;
}
// search by each "word" instead of whole search string
var words = params.term.split(" ");
// if the option isn't a match to any of the terms splitted - drop the option
for (var i = 0; i < words.length; i++) {
if (data.text.indexOf(words[i]) < 0) {
return null;
}
}
// if the option match partially, return option
return data;
}
Hello,
The filter hook "cred_select2_ajax_get_potential_relationship_parents_query_limit" works only for parent selector of Toolset post form.
But in your case, it is a custom user field, so it won't work, and it needs custom codes, but according to our support policy, we don't provide custom code support:
https://toolset.com/toolset-support-policy/
Here are my suggestion:
1) First you will need to enqueue the select2 JS and CSS files.
See hidden link for the files you will need
2) You can use Toolset Forms JS event "cred_form_ready" to trigger a JS function, like this:
jQuery(document).on('cred_form_ready', function() {
...
});
3) In this JS function, setup JS codes, trigger an AJAX call, when user change those specific user field values:
https://codex.wordpress.org/AJAX_in_Plugins
Get the related posts in server side.
4) Output the results as JSON format, and display it as the select2 options:
hidden link
