Twitters Typeahead.js in Action

Lately I’ve been doing some light web development in my spare time. One feature I’ve been finding myself needing was an auto-completing combo box. We have such a feature built in to our product at SurroundTech, but since I was brushing up on my PHP skills instead of .Net that wasn’t an option. The requirements were typeahead functionality as well as the ability to drop down the results in as a combo box would showing the results based on the already entered string. Also, it has to retreive data from a service. If the data was all static I would probably just hard code it into a combo box for simplicity.

A made it through three different approaches before I settled on the Typeahead.js released by twitter.

The first solution I looked at was the JQuery UI autocomplete. This supports JSON services to populate the combox. The downside is it doesn’t autofill in the text in the actual text box, and when you tab off it doesn’t complete the entry. The other hurdle is that it didn’t seem to play nice with my twitter bootstrap styles right out of the box. I’ll admit, I’ve become a big fan of the bootstrap framework, as it really simplifies responsive layouts.

Next, I realized there was already an auto-complete option built into the Twitter Bootstrap framework. It seems this was done as a fork of the branch, and eventually was added to the official release. There isn’t much in the way of documentation on how to use it, but I worked from this example. The biggest issue I encountered is that it doesn’t to support complex types. The JQuery auto-complete didn’t, but it did support display string and value, which was good enough for me.

Finally, I decided to check out the new Typeahead.js by twitter. Not to be confused with the type ahead support in the bootstrap framework (version 2.0). Funnily enough, the bootstrap framework has dropped their previous implementation of type ahead for the typeahead.js version in the 3.0 version of bootstrap. RC1 just came out for Bootstrap V3.0, I’ll admit I haven’t tried it out yet.

Typeahead.js supports json web calls via ajax, as well as static values and the ability to pre-cache data-sets on page load.  It also auto-fills in the most relevant result in the text input field as you type. Most importantly, it supports complex types, and templateing of results.

Example:

There are already some solid examples on the typeahead.js page. I threw together an example you can download and try out as well.

If you’re using the bootstrap 2.0 framework, make sure you generate a custom package without the typeahead jquery option, as the two versions have some of the same signatures and can cause conflicts. 

You’ll need a simple php (or language of your choice) service to return the json results. This page returns a json string array based on the query string passed in to the ‘q’ parameter. This would normally go to a database, but for ease of use I’ve setup some static data.


<? 	header('Content-Type: application/json'); 	 	function startsWith($haystack, $needle) 	{ 	    return !strncmp(strtoupper($haystack), strtoupper($needle), strlen($needle)); 	} 	 	$data[] = "Abrams, J.J."; 	$data[] = "Connery, Sean"; 	$data[] = "Darwin, Charles"; 	$data[] = "Davis, Ben"; 	$data[] = "Davis, Patrick"; 	$data[] = "Drake"; 	$data[] = "Ellington, Duke"; 	 	$query = $_GET['q']; 	if(ISSET($query)) 	{ 		foreach ($data as $value) 		{ 			if(startsWith($value, $query)) 			{ 				$result[] = $value; 			} 		} 		echo json_encode($result);      	} 	else 	{ 		echo json_encode($data); 	} ?>

Now we add the code for our control. Try typing the letter ‘d’, I didn’t go to the trouble of adding a huge dictionary of names to the fake service.


<input class="typeahead tt-query" dir="auto" id="string-typeahead" spellcheck="false" style="position: relative; vertical-align: top; background-color: transparent;" type="text" autocomplete="off" placeholder="Search Contacts" />



Finally, the javascript code to make the magic happen. Jquery and the typeahead.js files are required. The %QUERY parameter will be set to whatever data is in the typeahead text box.

<script type="text/javascript" src="/demo/typeahead.js"></script><script type="text/javascript">// <![CDATA[
$('#string-typeahead').typeahead([
		{
			name: 'contacts',
			remote: 'http://www.thepatrickdavis.com/demo/stringresult.php?q=%QUERY',
		}]);
// ]]></script>

For a full list of examples and features checkout the twitter typeahead page on github.

Chocolatey: Fresh System Setup

This week at the dotnet group I discovered a sweet (pun intended) tool. Short for Chocolatey Nuget, Chocolatey allows you to download and install programs from a PowerShell command line. Anyone who’s toyed around with Ubuntu will recognize that it’s very similar to apt-get.

Writing a Windows PowerShell Script takes a lot of pain out of reformatting your machine. I love the feeling of a fresh windows install, but that feeling fades quickly as I realize I’m going to have to spend the next four hours downloading and babysitting program installs. With Chocolatey I was able to put together a script to get all of my must have development (and a few other) utilities. I was able to go watch a movie and come back to a windows 8 start menu full of programs. I’ve also run the script on windows seven which was smooth except having to CTRL+C the firefox install (everything still installed fine).

If your interested in taking a look at my script, you can download it here. I’ve commented out everything that isn’t free. I also commented out Paint.net in favor of Gimp, since I only require one photo editing application.

You will have to allow powershell to run scripts, as it’s disabled by default for security reasons. You can do this by running the following command:

Steps to get started:

Chocolatey in Action

Chocolatey in Action

  1. Type ‘PowerShell’ in the run menu, this should bring up windows PowerShell. Right click on it and click ‘Run as Administrator’
  2. Enter ‘set-executionpolicy Unrestricted’ and take a Y on the confirmation
  3. Save the PowerShell script above and modify based on preference. IE may download it as a text file, make sure it has a ps1 extension
  4. Enter the path to the PowerShell script
  5. Make a sandwich
  6. Watch Chocolatey magically install your programs
  7. When completed Change the execution back using ‘set-executionpolicy Restricted’ so you don’t get haxored.

 

Here is a list of programs I included in my script, let me know if I’m missing any dev or general user essentials.

  •  Google Chrome
  • Firefox
  • Office 365 ($) -or- LibreOffice (free)
  • Libra Office
  • Sumatra PDF -or – FoxitReader
  • Python
  • Microsoft Web Platform Installer
  • Visual Studio 2012
  • Snoop
  • Fiddler -or- Wireshark
  • PHP
  • PHP Storm ($)
  • git
  • TortoiseGit
  • Subversion
  • Notepad++
  • Filezilla
  • Skype
  • Process Explorer
  • Dropbox -or- Google Drive -or- SkyDrive
  • Keepass
  • Oracle Virtualbox
  • Synergy
  • ack
  • Microsoft SQL Server Express
  • MySQL Community Server
  • MySQL Workbench
  • Toad Mysql
  • Gimp -or- Paint.net
  • Steam (Even the best devs need breaks)