[Resolved] Add search option to select field in CRED form

[Author]

Posts

[himanshuS]

I have a CRED form with select field that shows a dynamic list of all parent posts.

As the parents are increasing in number, it is harder for users to search for the parent post by scrolling down all the options.

Therefore, I am wondering if there is a way to add search option to the select field.

I used the following code to make it work but to no avail

//add search to select field
jQuery(document).ready(function($) {
// Define the select field ID
var selectFieldId = 'field id';

// Create an input field for searching
var searchInput = $('<input type="text" id="parent-search-input" placeholder="Search...">');

// Append the search input field before the select field
$(selectFieldId).before(searchInput);

// Filter the select options based on the search input
searchInput.on('input', function() {
var searchValue = $(this).val().toLowerCase();

// Loop through each option in the select field
$(selectFieldId + ' option').each(function() {
var optionText = $(this).text().toLowerCase();

// Show or hide the option based on the search value
if (optionText.includes(searchValue)) {
$(this).show();
} else {
$(this).hide();
}
});
});
});

What am I missing? Is there a standard way to do this?

[Christopher Amirian]

Based on the code snippet you provided, I can see a few issues that might cause the code not to work properly:

You mentioned that you used 'field id' as the placeholder for the select field's ID. You should make sure that you replace this with the actual ID of the select field and it should be preceded by a hash symbol, e.g., #mySelectField.

HTML <select> elements do not support showing or hiding individual <option> elements, which is what your code is attempting to do. Instead, you might want to use a third-party plugin that can simulate a <select> element and allow for searching. One popular choice for this is Select2. For more information:

hidden link

Here is an example of how you can use Select2 to make a <select> element searchable:

Include Select2 in your project by adding the following lines in the head of your HTML:

<link href="<em><u>hidden link</u></em>" rel="stylesheet" />
<script src="<em><u>hidden link</u></em>"></script>

Use Select2 to enhance your <select> element. Make sure your select field has an ID (in this example, the ID is "mySelectField"):

jQuery(document).ready(function($) {
    // Define the select field ID
    var selectFieldId = '#mySelectField';

    // Enhance the select field with Select2
    $(selectFieldId).select2({
        width: '100%', // Optional: specify the width of the select element
        placeholder: "Select a parent post..." // Optional: add a placeholder
    });
});

This code enhances your <select> element with Select2, making it searchable without having to manually create an input field and filter options like you were attempting to do. It's a much simpler and more effective solution for large option lists.

But please consider that this is a custom development and we will not be able to give you an exact code. The code above is an attempt to give you a way to go forward with the Slect2 library.

Thanks.

[himanshuS]

Thanks for the help here. I am working on making this work.

[Christopher Amirian]

Sure 🙂