0

I've created my own custom meta box. The meta box holds three drop down menus which are used as filters and a search box. There is also a results panel that shows a list of posts. The user can select the posts and add them to another panel which collects them. This is similar to the ACF Relationship field and how it works. You have posts on the left and you click one of them and it gets added to the collection area. Pressing submit on the post will save all of the values into the meta field. I have the filters working and i have the relationship piece working too.

For some reason, the way I have implemented the search box doesnt do anything. I tested this in a HTML file and it worked there. I could type in the search box and it would scan the items in the unordered list data-text attribute and find results and filter the list.

When I add this function into wordpress, I'm seeing it capturing the onkeyup stroken, but its not filtering the results in the results box.

Any ideas why this doesnt work in wordpress admin? Do I have to use ajax in order to filter these results?

Here is the javascript. I have this function sitting right after the form. I'm calling it on onkeyup in the input field for the search field.

function dmtSearchFunction() {

    // Declare variables
    var filter, li, i, dataArray;
    filter = jQuery('#dmt-filter-search').val().toUpperCase();
    li = jQuery("#dmt-choice-list li.choice-item");

        console.log('filter: ' + filter);
        console.log('li: ' + li);
        console.log('li length: ' + li.length);

    var dataArray = new Array();

    for (i = 0; i < li.length; i++) {
                var dataArray = jQuery(li[i]).data('text');

        if(dataArray.toUpperCase().indexOf(filter) > -1){
            jQuery(li[i]).css('display', 'block');
        } else {
            jQuery(li[i]).css('display', 'none');
        }
    }
}

1 Answer 1

0

Experimenting further I am able to get this to work now and improve it too.

Originally, I had a problem where when I put this function into my js file it would not fire. It would only work if i added it to my functions.php file just below the form.

I figured out that I needed to use a jquery .on statement and now when I start typing in the search field the function is triggered. I also like that I can now have all of the javascript in the js file.

Here is what i ended up with - this wrapped in a jquery document ready function:

function dmtSearchFunction() {

    console.log('cheers');

    // Declare variables
    var filter, li, i, dataArray;
    filter = jQuery('#dmt-filter-search').val().toUpperCase();
    li = jQuery("#dmt-choice-list li.choice-item");

        console.log('filter: ' + filter);
        console.log('li: ' + li);
        console.log('li length: ' + li.length);

    var dataArray = new Array();

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

        var dataArray = jQuery(li[i]).data('text');
        if(dataArray.toUpperCase().indexOf(filter) > -1){
            jQuery(li[i]).css('display', 'block');
        } else {
            jQuery(li[i]).css('display', 'none');
        }
    }
}
jQuery( ".filter-dmt-search" ).on( "keyup", "input", dmtSearchFunction );

Working!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.