Search Tax Terms via Drop Down Box WordPress
- SOLVED
Hey guys, I'm trying to assemble a "simple" dropdown box to display my custom tax terms that is searchable. I also want the term to re-direct to the term page when selected. This is similar to how the standard category dropdown works. However, I really want the dropdown to be "searchable" as I will have over 200 terms.
If you look at this [[LINK href="http://bootstrap-combobox-test.herokuapp.com/"]]LINK[[/LINK]], the "into this" dropdowns show an example of the search feature I'm trying to achieve.
Here is what I've tried...
<strong>#1 Method</strong>
Adapted from [[LINK href="http://blog.brianjohnsondesign.com/dropdown-menu-of-all-terms-in-custom-taxonomy-wordpress/"]]here[[/LINK]]
The following code performs great, EXCEPT the terms are not searchable. I have to scroll through the long list, but they do redirect to the correct page when selected.
<em>Also, for some reason can't seem to falsify the "hide empty categories" with the $args in this piece of code.</em>
PHP
<?php
$args = array(
'hide_empty' => 0,
'taxonomy' => '100gridgroups',
'exclude' => array(16, 20, 22,25, 27, 28, 30, 4, 33,), //* Enter ID's of parent categories to exclude from list
);
$categories = $categories = get_categories( $args );
$select = "<select name='cat' id='cat' class='postform'>n";
$select.= "<option value='-1'>Select category</option>n";
foreach($categories as $category){
if($category->count > 0){
$select.= "<option value='".$category->slug."'>".$category->name."</option>";
}
}
$select.= "</select>";
echo $select;
?>
Javascript
<script type="text/javascript"><!--
var dropdown = document.getElementById("cat");
function onCatChange() {
if ( dropdown.options[dropdown.selectedIndex].value != -1 ) {
location.href = "<?php echo home_url();?>/grid100groups/"+dropdown.options[dropdown.selectedIndex].value+"/";
}
}
dropdown.onchange = onCatChange;
--></script>
<strong>#2 Method</strong>
Adapted from [[LINK href="https://github.com/danielfarrell/bootstrap-combobox"]]here[[/LINK]]
The following code has the searchable feature, BUT I am not re-directed to the term page. Instead it renders an ugly URL in my address bar with no other visual change such as page re-direct. I think it's trying to search the page?
<form class="form-inline" >
<div class="form-group pull-right">
<select class="combobox form-control" name="inline">
<option value="" selected="selected">Select A Group</option>
<?php
$libargs = array(
'orderby' => 'name',
'order' => 'ASC',
'exclude' => array(16, 20, 22,25, 27, 28, 30, 4, 33, ), //* Enter ID's of parent categories to exclude from list
'number' => $per_page,
'offset' => $paged_offset,
'hide_empty' => 0,
);
$_libargs = wp_parse_args($term_args, $libargs);
$libcats = get_terms( '100gridgroups', $_libargs);
#fix
$i = 0;
foreach($libcats as $lc){
if( $i % 1 == 0 ) { ?>
<div class="clearfix"></div>
<?php }
$i++; ?>
<?php $termlink = get_term_link( $lc->slug, '100gridgroups' ); ?>
<option value="<?php echo $lc->name; ?>"><a href="<?php echo $termlink; ?>"><?php echo $lc->name; ?></a>
</option>
<?php } ?>
</select>
</div>
</form>
If someone can help me mash these examples together so I can get both the search feature and the re-direct to the term page that would be helpful, thanks!
Answers (2)
Luis Abarca answers:
I did something similar with posts entries with [[LINK href="http://ivaynberg.github.io/select2/"]]Select2[[/LINK]]
Add to your header
<link rel="stylesheet" href="YOUR_PATH/select2/select2.css">
Add to your content
<?php
$args = array(
'hide_empty' => 0,
'taxonomy' => '100gridgroups',
'exclude' => array(16, 20, 22,25, 27, 28, 30, 4, 33,), //* Enter ID's of parent categories to exclude from list
);
$categories = $categories = get_categories( $args );
?>
<h1 class="text-hide">Welcome</h1>
<select id="goto" style="width: 100%">
<option value="-1">Select category</option>
<?php foreach($categories as $category): ?>
<?php if ($category->count > 0): ?>
<?php echo '<option value="' . get_category_link($category->term_id) . '">' . $category->name . '</option>';
<?php endif ?>
<?php endforeach ?>
</select>
// Add to your footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="YOUR_PATH/select2/select2.js"></script>
<script>
$(document).ready(function()
{
var options = {
placeholder: 'Search',
minimumInputLength: 2,
matcher: function(term, text)
{
var has = true;
var words = term.toUpperCase().split(" ");
for (var i =0; i < words.length; i++){
var word = words[i];
has = has && (text.toUpperCase().indexOf(word) >= 0);
}
return has;
}
};
// Send the user to the category URL
$("#goto").select2(options).on('change', function()
{
var url = $("#goto").val();
window.location.href = url;
});
// Focus our search input
$('#goto').select2('focus');
});
</script>
streetfire comments:
Any clue why it would display the terms? The box is showing up but no terms are showing up. Trying to figure out why.
P.S... I had to add a ?> to the end of
<?php echo '<option value="' . get_category_link($category->term_id) . '">' . $category->name . '</option>';
Looks like it got cut off in your example. ;)
streetfire comments:
Hah I see you updated your answer before I posted that... let me review those changes.
streetfire comments:
Ok, so after reviewing your updates, here's what's happening. The dropdown box shows, however the down arrows loads, then disappears.
Second, the only terms that are showing are ones that have posts in them, not all of them.
And last, is there supposed to be a list of terms under the search box like the select2 example shows? If so, there is not and I would like one.
You can see the example here: http://www.runningalpha.com/grid100/ (Box on the left)
Luis Abarca comments:
Hi, yeah my bad with the close tag.
<?php echo '<option value="' . get_category_link($category->term_id) . '">' . $category->name . '</option>'; <strong>?></strong>
There´s a if that filters the empty terms
<blockquote><?php if ($category->count > 0): ?></blockquote>
Edit the foreach block like this
<?php foreach($categories as $category): ?>
<?php echo '<option value="' . get_category_link($category->term_id) . '">' . $category->name . '</option>'; ?>
<?php endforeach ?>
streetfire comments:
Ok, that helped, but still not quite where I want to be.
1) the terms still aren't linking to the term page and,
2) in the drop down, I would like a scrollable list of the terms with the search field at the top as shown here http://ivaynberg.github.io/select2/
streetfire comments:
Anyone? :(
Luis Abarca comments:
Hi, which example ?, i'm trying to see your site but it has a welcome message.
streetfire comments:
Hi, sorry I have to keep that enables as much as possible. Turned it off for a few hours. Check out http://www.runningalpha.com/grid100/
The drop down in question is on the far left.
Luis Abarca comments:
Ok, you need to change this.
Option A: Add an ID to your select
<select <code>id="goto"
</code>
Option B: Change the Javascript to match the style of your <select>
// Send the user to the category URL
$(".combobox").select2(options).on('change', function()
{
var url = $(".combobox").val();
window.location.href = url;
});
Option A is better ;)
streetfire comments:
Ah, hahah... I'm getting confused. Sounds like you're talking about the combobox dropdown now, instead of Select2 on the left. So I tried making those updates to the combobox dropdown, which is on the right, and nothing really changed :(
Luis Abarca comments:
Ups!, sorry my bad.
If you need the lists and search box, remove the minimumInputLength argument from options.
var options = {
placeholder: 'Search',
matcher: function(term, text)
{
var has = true;
var words = term.toUpperCase().split(" ");
for (var i =0; i < words.length; i++){
var word = words[i];
has = has && (text.toUpperCase().indexOf(word) >= 0);
}
return has;
}
};
streetfire comments:
OK, great, THAT is better. However, the terms still need to link to their taxonomy page and they are not. Is there something I can do for that?
Luis Abarca comments:
Try this
<?php echo '<option value="' . get_term_link($category->term_id, '100gridgroups') . '">' . $category->name . '</option>';
streetfire comments:
Hm, breaks the page...
streetfire comments:
I got it!!!
<?php echo '<option value="' . get_term_link( $category->slug, '100gridgroups') . '">' . $category->name . '</option>';?>
John Cotton answers:
Have you looked at the [[LINK href="http://ivaynberg.github.io/select2/"]]select2 library[[/LINK]] as an option?
Look particularly at the Loading Remote Data example would looks like what you are describing.
It's straightforward enough to incorporate some WP ajax to return a list of matching term names and then you could redirect in JS on the change event or similar.