SCANU's Live Admincp Search - jQuery filtering search box on admincp!

[Scanu]

Description

This modification adds a search box at the top of the navigation menus on the left of the admincp.
The search box will filter navigation menus while you type, showing only the tabs containing the word you're looking for. This modification is made to make faster the forum administration so that you don't have to scroll the navtabs until you find the right one, just type it and click it! Look at the scrrenshot for more.

"Give me a jQuery library and I will change the web" :D
-Scanu

Features


1 phrase, 1 navgroup
No changes to the admincp code
Uses jquery to handle search string and hide show tabs
Filter navtitles and navlinksat the same time
Instant live search


Installation


Download LiveAdmincpSearch.zip from attachments
Extract the archive
Upload to your vbulletin folder the content of the upload folder
Upload the product "product-scanusearch.xml" in your admincp
That's done!


Compatibility

This should work in every vBulletin version (even vB3) but it has been tested just on 4.2.0 and 4.2.2 so let me know in a reply :)

Translations

As of this release could be hard to translate the search placeholder, if you want to translate it i'll be happy to help you

Restrictions/ Reported issues

As of this version when you start typing all navgroups are extended without the image changing (I'll fix this on the next version)
If you find any bug please let me know

PLEASE VOTE THIS MOD FOR MOTM CLICK HERE, AND CLICK MARK AS INSTALLED (javascript: vborg_donominate(299490,1,true,'f1a324211c4dc40cdd fb19e3c692e185'))

To get support:
Mark this mod as Installed
Copy/Pasted errors or screenshots
Source Code of the iframe containing the searchbox
For further help you can pm me a moderator account with phrase permissions


More info about this mod

When i asked my brother to port the vb5 admincp style to vb4 I thought the admincp need even more to be modern, when i was using admincp with the new style I saw that as always i coudn't find tabs on the left so I decided to bring the vb5 search feature on vb4admincp. First i tought of a new page with php and queries but then i remembered of a jquery filter plugin; a jquery plugin would have been impossible to be adapted to the strange html structure of navtabs so i decided to code it by myself and using jquery apis i did this in just some hours! :)


To the coders: This mod use uses only a navgroup, where in the phrase there are jquery codes to inject the search box removing the navgroup itself and make the filtering of tabs. This isn't the best way to do it, but since the admincp is not customizable i ended up with this, in the next version i'll use templates to store jquery codes and search box, and i'll inject the search box without using navgroup

Follow me on twitter for updates (http://twitter.com/scanu_account)

[Scanu]

Change log

- 0.1 First beta release on Vbulletin.org

- 0.2 WORK IN PROGRESS
- No more navgroup, plugins used to inject search box and jquery
- Settings of the mod
- Phrase for the search placeholder
- jQuery codes and search box html stored in a template instead of in a phrase
- Fixed expanded image not changing when admin starts typing
- Restore already expanded panels when user cancel his search

[Scanu]

Screenshots
http://dvdimagehosting.altervista.org/images/1gsg.png
http://dvdimagehosting.altervista.org/images/2zgz.png
http://dvdimagehosting.altervista.org/images/3mqm.png
http://dvdimagehosting.altervista.org/images/4csc.png

[Scanu]

Reserved

[fxdigi-cash]

amazing tool!! just what I needed.

Thanks, Scanu for the great share and effort :)

[Scanu]

You're welcome :) I just did this for me cause I think it's useful, if i see that other people use it I'll release an update to use phrases, settings, plugins, and templates, but as now it's working just as I wanted it

[Black Snow]

Great idea and great mod! Will save a lot of time. Thanks!

ps. what admincp style are you using?

[Scanu]

Thank you, I requested this style to my brother because I liked the vb5 admincp style and I hate all other admincp styles on vB.org lol
It isn't finished yet, here you can find the thread with the progress: https://vborg.vbsupport.ru/showthread.php?t=313380

If you want I can give you an incomplete beta of it

[Black Snow]

Thank you, I requested this style to my brother because I liked the vb5 admincp style and I hate all other admincp styles on vB.org lol
It isn't finished yet, here you can find the thread with the progress: https://vborg.vbsupport.ru/showthread.php?t=313380

If you want I can give you an incomplete beta of it

Yes please, that would be great

[Dr.CustUmz]

Thanks for this, I actually took and hard coded it into my backup so I never loose it =)

for any vb3 users interested in doing the same (not sure if its the same in vb4)

in includes/adminfunctions_navpanel.php
find:<a href=\"#\" onclick=\"read_group_prefs(); return false\">$vbphrase[revert_prefs]</a>
</div>

directly after before the " place (this is still scanu's code only removed comments and added escapes for php):<br /><input placeholder=\"Search...\" id=\"scanusearch\" type=\"text\" style=\"margin-bottom: 12px; width: 162px;\" />
<script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>
<script type=\"text/javascript\">
$('#scanusearch').insertAfter('.navtitle').first() ;
$('.navtitle').first().remove();
$('#scanusearch').keyup(function(){
var searchString = $(this).val().toLowerCase();
var results = [];
$('.navgroup').slice(1).each(function(){
var key = $(this).attr('id');
results[key] = 0;
$(this).find('.navlink').each(function(){
var text = $(this).text().toLowerCase();
if (text.indexOf(searchString) != -1) {
$(this).show();
results[key]++;
} else {
$(this).hide();
}
});
if (results[key] > 0) {
$(this).prev('.navtitle').show();
$(this).show();
} else {
$(this).hide();
$(this).prev('.navtitle').hide();
}
if (searchString == '')
$(this).hide();
});
$('.navtitle').each(function(){
var text = $(this).text().toLowerCase();
if (text.indexOf(searchString) != -1) {
$(this).show();
$(this).next().find('.navlink').show();
}
});
});
</script>

no need to import product, or upload any files other than the one you just edited. but still mark scanu's product as installed if you use this method =)