codeterrorizer.com

Simple example on how to search a list with jQuery

Christian Koch — Mon, 08 Mar 2010 20:48:20 +0000

How to create a simple List Search with basic jQuery Functions.

First we need to create a simple unordered list for this example:




	
	Insert title here
	


	Search
	
	
		eins
		zwei
		drei
		vier
		fünf
		sechs

Add the current jQuery Library into the header part. I use Googles jQuery API in most of my projects to keep the transfer off my servers. I suggest the same for you if you are looking for performance.

To catch all changes from the search field with id “search” I am going to bind the the change keyup event to the id.

$('#search').bind("change keyup", function() {
});

Going on I check how many letters the user inserted, this value I set to 2. Play with this as you like.

searchWord = $(this).val();
if (searchWord.length > 2) {
}

So, I start search the list as soon as the user inserted at least 3 letters.

To finally search the list I loop thru the list with jQuery’s each function and use their match function on each list item text.

$('ul.search-list li').each(function() {
	text = $(this).text();
	if (text.match(searchWord)) {
		// Jipieh found one match, now do something with the current list item.
		// In my case I mark the background of the list item yellow.
		$(this).css('background-color', 'yellow');
	}
});

Just using match with the search string will not find case insensitive matches. Simply prepare the statement with RegExp as follows.

// 'i' stands for case insensitive
if (text.match(RegExp(searchWord, 'i'))) {

Now finally the whole example at once




	
	Insert title here
	
	
	


	Search
	
	
		eins
		zwei
		drei
		vier
		fünf
		sechs

If this is not enough you also could just wrap the matched subtext with a background, simply change your js:

if (searchWord.length >= 1) {
	$('ul.search-list li').each(function(i, data) {
		text = $(this).text();
		if (text.match(RegExp(searchWord, 'i'))) {
			newHTML = text.replace(RegExp(searchWord), ''+searchWord+'');
			$('ul.search-list li:eq('+i+')').html(newHTML);
		}
	});
}

I suggest that in both cases you are also not searching just once, so you have to reset the last search results.
With the first whole list item background example simply add one line:

$('#search').bind("change keyup", function() {
	searchWord = $(this).val();
	if (searchWord.length >= 1) {
		// this is new   ... reset background
		$('ul.search-list li').css('background-color', 'white');
			$('ul.search-list li').each(function(i, data) {
			text = $(this).text();
			if (text.match(RegExp(searchWord, 'i'))) {
				$(this).css('background-color', 'yellow');
			}
		});
	}
});

With the snippet that just marks the specified search substring do this:

$('#search').bind("change keyup", function() {
	searchWord = $(this).val();
	if (searchWord.length >= 1) {
		// did it quick and dirty with class
		$('ul.search-list li span.mark-search-result').attr('background-color', 'white');

		$('ul.search-list li').each(function(i, data) {
			text = $(this).text();
			if (text.match(RegExp(searchWord, 'i'))) {
				newHTML = text.replace(RegExp(searchWord), ''+searchWord+'');
				$('ul.search-list li:eq('+i+')').html(newHTML);
			}
		});
	}
});

So that’s it, you could ofc ourse hide elemnts that don’t match and show them again or make whatever you like

Typo3 Extension Flexform, outsourcing Language Files for your flexform

Christian Koch — Fri, 29 Jan 2010 16:17:53 +0000

Maybe you have seen it in my last short tutorial “Typo3 Extension Flexform onchange reload” and wondered what I am doing there with

LLL:EXT:extension/res/lang/flexform.xml:sheet_general

What I am doing there is simple, I put all my translations in a different folder in res/lib/flexform.xml under my Exteion directory.

flexform.xml looks just like every other language.xml:



        
                module
                
        
        
                
                        Options
                        Background image
                
                
                        Optionen
                        Hintergrund Bild

Typo3 Extension Flexform onchange reload

Christian Koch — Fri, 29 Jan 2010 16:05:16 +0000

You want your typo flexform to reload after the backend user selects something.

Add the reload before your config Tag:


  
    
      
        
          LLL:EXT:extension/res/lang/flexform.xml:sheet_general
        
        array
        
          
            
              LLL:EXT:extension/res/lang/flexform.xml:topCategory
              reload
              
                group
                db
                pages
                1
                1
                1

php.ini short tag in newer PHP versions disabled

Christian Koch — Mon, 11 Jan 2010 12:15:01 +0000

Simply enable short Tag’s like

short_open_tag = On

Turn off Deprecated Warnings

PHP MS SQL ODBC on Debian

Christian Koch — Fri, 06 Nov 2009 10:01:43 +0000

Short introduction on how to establish a MS SQL Server connection with PHP on Debian.

Install FreeTDS on Debian for PHP ODBC. Login as root.

First check if PHP’s ODBC extension is installed. If not install it with:

apt-get install php5-odbc

Install FreeTDS ODBC:

apt-get install tdsodbc

Don’t forget to restart your Apache after installing additional PHP extensions.

/etc/init.d/apache restart

Now we can test a connection to MS SQL Server.

That’s it HF

No related posts.

italic font-style causes oversized divs in IE6

Andrea Hildebrand — Thu, 05 Nov 2009 13:15:32 +0000

Block elements containing italic text are displayed expanded in IE6.

As a result, two parallel floating containers can not be displayed side by side in case the specified overall width has been exceeded.

As a solution, the following extra style has to be added to the block element containing the italic font-style:

.italic-container{
	zoom:1;
	overflow: visible
}

Fast SQLite Tutorial

Christian Koch — Fri, 23 Oct 2009 20:32:34 +0000

here a short introduction to SQLite 3. Have Fun!

Open database, if database does not exist it will be created

C:\test> sqlite4 mydatabase.db

Show help


sqlite> .help

Show databases

sqlite> .databases

Show tables

sqlite> .tables

Show create statement for table

sqlite> .schema tablename

Quit SQLite

sqlite> .quit

sqlite> .exit

Create table as used to in SQL

C:\test> sqlite4 mydatabase.db
sqlite> CREATE TABLE username (id INTEGER PRIMARY KEY, username VARCHAR(120), password TEXT, firstname VARCHAR(120), lastname VARCHAR(120), email VARCHAR(250));
sqlite> .tables
username

Drop table

sqlite> DROP TABLE username;
sqlite> .tables
sqlite>

Insert

sqlite> CREATE TABLE username (id INTEGER PRIMARY KEY, username VARCHAR(120), password TEXT, firstname VARCHAR(120), lastname VARCHAR(120), email VARCHAR(250));
sqlite> INSERT INTO username (username, firstname, lastname, email) VALUES ("Christian.Koch", "Christian", "Koch", "blubb@blubbblubb.net");

Select

sqlite> SELECT * FROM username;
1|Christian.Koch||Christian|Koch|blubb@blubbblubb.net
sqlite>

You actually do not need to open the sqlite shell. All commands from SQLite and SQL can be send from comandline.

C:\test> sqlite3 mydatabase.db "SELECT * FROM username;"
1|Christian.Koch||Christian|Koch|blubb@blubbblubb.net

C:\test>

Creating a dump

C:\test> sqlite3 mydatabase.db ".dump"
PRAGMA foreign_keys=OFF;
BEGIN TRANSACTION;
CREATE TABLE username (id INTEGER PRIMARY KEY, username VARCHAR(120), password TEXT, firstname VARCHAR(120), lastname VARCHAR(120), email VARCHAR(250)
);
INSERT INTO "username" VALUES(1,'Christian.Koch',NULL,'Christian','Koch','blubb@blubbblubb.net');
COMMIT;

C:\test>

Backup the dump

C:\test> sqlite3 mydatabase.db ".dump" > backup.sql

Create new database from dump

C:\test> sqlite3 newdatabase.db < backup.sql
C:\test> sqlite3 newdatabase.db ".dump"
PRAGMA foreign_keys=OFF;
BEGIN TRANSACTION;
CREATE TABLE username (id INTEGER PRIMARY KEY, username VARCHAR(120), password TEXT, firstname VARCHAR(120), lastname VARCHAR(120), email VARCHAR(250)
);
INSERT INTO "username" VALUES(1,'Christian.Koch',NULL,'Christian','Koch','blubb@blubbblubb.net');
COMMIT;

C:\test>

Function subwords, gets words by max string length

cURL: a quick intro

Christian Koch — Mon, 19 Oct 2009 13:08:52 +0000

Here you can find a short practical intro to cURL.

cURL

Show website.
curl www.mydomain.com

Sending post
curl -d “name1=value1&name2=value2″ www.mydomain.com

Save output in a file
curl -o out.txt www.mydomain.com

Spoof the Referer
curl -e www.here-i-am-from.com www.mydomain.com

Spoof User Agent
curl -A ‘SuperGC Microsoft 7.5′ www.mydomain.com

Spoof Cookies
curl -b =”name=value” www.mydomain.com

Catch and use Cookies
curl –dump-header header www.mydomain.com
curl -b header www.mydomain.com

curl -c cookies.txt www.mydomain.com
curl -b cookies.txt -c cookies.txt www.mydomain.com

cURL Timing
Abort if to slow, if you do not download 300 bytes (-Y) every seconds for one minute, 60 seconds (-y) then stop download
curl -Y 300 -y 60 www.mydomain.com

Set overall timelimit with -m
curl -m 10 www.mydomain.com

Limit the transferrate per second
curl –limit-rate 10K www.mydomain.com (same as)
curl –limit-rate 10240 www.mydomain.com

Prevent cURL from upload (-T upload) in a packet size (–limit-rate) of 1 mb per second
curl -T upload.file www.mydomain.com

Setting Headers
curl -H “Balbla: This is the value ” www.mydomain.com

Prevent to send specific headers with -H “name:”
curl -H “host:” www.mydomain.com

Twitter CURL (found in the net, with some changes)

PHP Class Mail

Christian Koch — Mon, 19 Oct 2009 12:51:58 +0000

With this E-Mail Class you can send Plain Text, HTML and attach Files via Web-URL. Mixed E-Mail Text/HTML with/without Attachment are also possible.


 * @copyright Christian Koch 
 */
class Mail {
	/**
	 * Mail recipient.
	 *
	 * @var string
	 */
	private $strMailRecipient = '';

	/**
	 * Mail sender.
	 *
	 * @var string
	 */
	private $strMailSender = '';

	/**
	 * Mail reply to.
	 *
	 * @var string
	 */
	private $strMailReplyTo = '';

	/**
	 * Mail subject.
	 *
	 * @var string
	 */
	private $strMailSubject = '';

	/**
	 * Mail palintext message.
	 *
	 * @var string
	 */
	private $strMailPlainText = '';

	/**
	 * Mail HTML message.
	 *
	 * @var string
	 */
	private $strMailHTML = '';

	/**
	 * Array with attachment paths.
	 *
	 * @return array
	 */
	private $arrAttachment = array();

	/**
	 * Encoding type, by default UTF-8.
	 *
	 * @var string
	 */
	private $strEncoding = 'UTF-8';

	public function __construct() {}

	/**
	 * Set attachment path.
	 *
	 * @param string $strFile
	 * @param string $strName
	 * @param string $strMime
	 */
	public function setAttachment($strFile, $strName, $strMime) {
		$this->arrAttachment[] = array(
			'file' => $strFile,
			'name' => $strName,
			'mime' => $strMime
		);
	}

	/**
	 * Set encoding.
	 *
	 * @param string $str
	 */
	public function setEncoding($str) {
		$this->strEncoding = $str;
	}

	/**
	 * Set mail html message.
	 *
	 * @param string $str
	 */
	public function setMailHTML($str) {
		$this->strMailHTML = $str;
	}

	/**
	 * Set mail subject.
	 *
	 * @param string $str
	 */
	public function setMailPlainText($str) {
		$str = strip_tags($str);

		$this->strMailPlainText = $str;
	}

	/**
	 * Set mail subject.
	 *
	 * @param string $str
	 */
	public function setMailSubject($str) {
		$str = strip_tags($str);

		$this->strMailSubject = $str;
	}

	/**
	 * Set mail sender address.
	 *
	 * @param string $str
	 */
	public function setMailRecipient($str) {
		$this->strMailRecipient = $str;
	}

	/**
	 * Get mail sender address.
	 *
	 */
	public function getMailRecipient() {
		return $this->strMailRecipient;
	}

	/**
	 * Set mail sender address.
	 *
	 * @param string $str
	 */
	public function setMailSender($str) {
		$this->strMailSender = $str;
	}

	/**
	 * Get mail sender address.
	 *
	 */
	public function getMailSender() {
		return $this->strMailSender;
	}

	/**
	 * Set mail reply to address.
	 *
	 * @param string $str
	 */
	public function setMailReplyTo($str) {
		$this->strMailReplyTo = $str;
	}

	/**
	 * Get mail reply to address.
	 *
	 * @return string
	 */
	public function getMailReplyTo() {
		if (empty($this->strMailReplyTo)) {
			$this->strMailReplyTo = substr_replace(
				$this->strMailSender,
				'noreply',
				0,
				strpos($this->strMailSender, '@'));
		}

		return $this->strMailReplyTo;
	}

	/**
	 * Send email.
	 *
	 */
	public function send() {
		$strMessageSeperator = $this->getMailSeperator();

		$strMailHeader = $this->getStdMailHeader();
		$strMailHeader .= "MIME-Version: 1.0\n";
		$strMailHeader .= count($this->arrAttachment) > 0 ? "Content-Type: multipart/mixed; " : "Content-Type: multipart/alternative; ";
		$strMailHeader .= "boundary=\"{$strMessageSeperator}\"\n\n";

		if (!empty($this->strMailHTML) && !empty($this->strMailPlainText)) {
			$strAlternativeMessageSeperator = $this->getMailSeperator();

			$strMailMessage = "--{$strMessageSeperator}\n";
			$strMailMessage .= "Content-Type: multipart/alternative; boundary=\"$strAlternativeMessageSeperator\"\n\n";
			$strMailMessage .= "--$strAlternativeMessageSeperator\n";
			$strMailMessage .= $this->getPreparedMailPlainText();
			$strMailMessage .= "--$strAlternativeMessageSeperator\n";
			$strMailMessage .= $this->getPreparedMailHTML();
			$strMailMessage .= "--$strAlternativeMessageSeperator--\n";
		} else if (!empty($this->strMailPlainText)) {
			$strMailMessage = "--{$strMessageSeperator}\n";
			$strMailMessage = $this->getPreparedMailPlainText();
		} else if (!empty($this->strMailHTML)) {
			$strMailMessage = "--{$strMessageSeperator}\n";
			$strMailMessage .= $this->getPreparedMailHTML();
		}

		for ($i=0; $iarrAttachment); $i++) {
			if (ini_get('allow_url_fopen') == '1') {
				$strFileContents = file_get_contents($this->arrAttachment[$i]['file']);
			} else {
				if (function_exists('curl_init')) {
					$ch = curl_init();
					curl_setopt($ch, CURLOPT_URL, $this->arrAttachment[$i]['file']);
					curl_setopt($ch, CURLOPT_HEADER, 0);
					curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
					curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0');
					$strFileContents = curl_exec($ch);
					curl_close($ch);
				}
			}

			$strMailMessage .= "--{$strMessageSeperator}\n";
			$strMailMessage .= $this->getPreparedMailAttachment($this->arrAttachment[$i]['mime'], $strFileContents, $this->arrAttachment[$i]['name']);
		}

		$strMailMessage .= "\n--{$strMessageSeperator}--\n";

		mb_internal_encoding($this->strEncoding);
		mail($this->strMailRecipient,
			mb_encode_mimeheader($this->strMailSubject, $this->strEncoding, 'B'),
			$strMailMessage,
			$strMailHeader);
	}

	/**
	 * Get prepared plaintext including mail content type part.
	 *
	 * @return string
	 */
	private function getPreparedMailPlainText() {
		$strResult = "Content-Type: text/plain; charset=\"{$this->strEncoding}\"\n";
		$strResult .= "Content-Transfer-Encoding: 7bit\n\n";
		$strResult .= "{$this->strMailPlainText}\n";

		return $strResult;
	}

	/**
	 * Get prepared HTML code including mail content type part.
	 *
	 * @return string
	 */
	private function getPreparedMailHTML() {
		$strHTMLMessage = $this->getHTMLReplacedUmlauts();

		$strResult  = "Content-Type: text/html; charset=\"{$this->strEncoding}\"\n";
		$strResult .= "Content-Transfer-Encoding: 7bit\n\n";
		$strResult .= "{$strHTMLMessage}\n";

		return $strResult;
	}

	/**
	 * Get prepared Attachment code including mail content type part.
	 *
	 * @param string $mime
	 * @param string $strFile
	 * @param string $strName
	 * @return string
	 */
	private function getPreparedMailAttachment($strMime, $strFile, $strName) {
		$strResult  = "Content-Type: $strMime; name=\"$strName\"\n";
		$strResult .= "Content-Transfer-Encoding: base64\n";
		$strResult .= "Content-Disposition: attachment; filename=\"$strName\"\n\n";
		$strResult .= base64_encode($strFile)."\n";

		return $strResult;
	}

	/**
	 * Get HTML message part with replaced umlauts to html code.
	 *
	 * @return string
	 */
	private function getHTMLReplacedUmlauts() {
		$arrUmlauts = array('/ä/', '/ü/', '/ö/', '/Ä/', '/Ü/', '/Ö/', '/ß/', '/„/', '/“/');
		$arrReplace = array('ä', 'ü', 'ö', 'Ä', 'Ü', 'Ö', 'ß', '„', '“');

		$strResult = preg_replace($arrUmlauts, $arrReplace, $this->strMailHTML);

		return $strResult;
	}

	/**
	 * Get dynamic mail separator.
	 *
	 * @return string
	 */
	private function getMailSeperator() {
		return 'PHP'.md5(uniqid(time()));
	}

	/**
	 * Get standard mail header.
	 *
	 * @return string
	 */
	private function getStdMailHeader() {
		$strPHPVersion = phpversion();

		$strResult = "To: {$this->strMailRecipient}\n";
		$strResult .= "From: {$this->strMailSender}\n";
		$strResult .= 'Return-Path: '.$this->getMailReplyTo()."\n";
		$strResult .= 'Reply-To: '.$this->getMailReplyTo()."\n";
		$strResult .= "X-Mailer: PHP/{$strPHPVersion}\n";

		return $strResult;
	}
}

?>

Usage of class Mail.

...
$mail = new Mail();
$mail->setMailHTML($html);
$mail->setMailPlainText($plainText);
$mail->setMailSubject($subject);
$mail->setMailRecipient($recipient);
$mail->setMailSender('no-reply@mydomain.com');
$mail->setMailReplyTo('reply@mydomain.com');

CSS :hover Pseudo Class

Markus Bäck — Tue, 29 Sep 2009 08:07:36 +0000

IE only supports :hover pseudo class for anchor elements. You can fix this issue with jQuery’s hover event.

jQuery

$('ul li').hover(

function () {
$(this).addClass('element');
},

function() {
$(this).removeClass('element');
}
);

CSS

.element {
background-color:red;
}

UL List


   Home
   About
   Portfolio
   Contact