Tcg Wiki
Register
Advertisement
Cardsearch1

An example of the script in action

Card Search is script written by Daggles. It allows the user to add a search bar to card pages to make finding certain decks easier.

If cards from the search is found the script will list the file names, grey out all other cards and highlight the ones wanted.

The script is available for free to download here. A demo and installation instructions are included. The page has been archived but the code and instructions have been added below for use.


Instructions

1. Download cardsearch-1.0.js. (see below)

2. Put the following in any pages where you plan on using this script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="cardsearch.js"></script>

3. Add the following classes to your CSS (style them however you wish):

.highlightCard {
	border: 2px solid #D63550;
	background: #D63550;
}
.dimmedCard {
	opacity:0.3;
	filter:alpha(opacity=30);
}


4. Add this form to whatever page you want to search:

<form action onSubmit="return false;">
	<input name="search" id="search" />
   	<input value="Search" type="submit" onClick="highlightImage();"/> 
	<input value="Clear" type="submit" onClick="clearHighlight();"/>
</form>
<div id="cardlist"></div>


The <div id="cardlist"></div> is where the list of found cards will be shown. It doesn't have to be right under the form, as long as it's somewhere on the page the cards will show up in it, although errors will also be shown inside it as well.

Notes[]

  • The script works by searching through the title attribute of your card images. Both Marfisa's TCG Manager and Mandi's Card Manager automatically add titles to your cards. If you are not using either you will have to add title attributes yourself. You can also use alt but be sure to replace all instances of "title" in cardsearch.js with "alt".
  • I'm sure this could be made to search filenames but that takes more effort than I was willing to expend in the hour this took me to write, lol. I might update it later.
  • You are welcome to change this script in any way you wish, as well as redistribute it with your changes. Open source ftw.
  • On that note, if something is terribly wrong or I could have done something it a much better way, please do let me know! I'm learning as I go.
  • If you need help understanding how to get this working on your own site I'd be happy to help as best I can, but I will not teach you HTML/CSS/Javascript.


JS File Copy and paste the code below into a file and label it cardsearch-1.0.js Upload the .js file to your main directory.

/*------------------------------------------------
	By Daggles
	http://tcg.daggles.net/
	Modify and redistribute as you see fit
	
	11/17/2011: 1.1
		- Cards in the found list are now links that will take you directly to the card
	11/15/2011: 1.0
		Initial release
------------------------------------------------*/

function repl(str) {
   return $.trim(str.replace(/(?=[\/\\^$*+?.()|{}[\]])/g, ' '));
}
function clearHighlight() {
	$('img').each(function(index) {
		$(this).removeClass('dimmedCard, highlightCard');
	});
}
function highlightImage() {
	var searchTerm = repl($('#search').val());
	var re = new RegExp(searchTerm  + "[a-zA-Z]*[0-9]*", "i");
	var cardArray = new Array();
	
	if (searchTerm.length >= 3) {
		$('#cardlist').text();
		$('img').each(function(index) {
			if ($(this).attr('title') != undefined) {
				if ($(this).attr('title').match(re)) {
					$(this).addClass('highlightCard').removeClass('dimmedCard');
					cardArray.push('<a href="#' + $.trim($(this).attr('title')) + '">' + $.trim($(this).attr('title')) + '</a>');
					$(this).attr('id', $.trim($(this).attr('title')));
				} else {
					$(this).removeClass('highlightCard').addClass('dimmedCard');
				}
			}
		});
	var cardArrayCount = cardArray.length;
	$('#cardlist').html('Found ' + cardArrayCount + ' cards.
' + cardArray.join(', ')); } else { $('#cardlist').html('Please enter 3 or more characters.'); } } function clearHighlight() { $('img').each(function(index) { $(this).removeClass('highlightCard dimmedCard'); $('#cardlist').text(); }); }
Advertisement