A Tech Blog

Ajax.Search based on Prototype

Ajax.Search displays search results on the fly when typing into a search box, similar to Spotlight search results in OS X, and also the new Apple.com search box.

Try the Ajax.Search Example:

  • Type ‘Bacon’ to get the first example results set (definition list)
  • Type ‘Waffles’ to get the second example results set (unordered list)
  • Type anything else and see the results not found message

Features

  • Search results display as you type, with configurable time between keystrokes (so the server is not hit with every single keystroke)
  • Up and down arrow keys highlight each result, return key sends user to search result url, escape hides the search results
  • Only required output from the server is a HTML unordered list (<ul>) or definition list (<dl>), which can be styled with CSS to look however you want

How to use it

All you have to do is include prototype.js and ajax.search.js into the head of your document, then tell your page to load Ajax.Search like so:

  Event.observe(window,'load',function() { new Ajax.Search({
      url: '/ajax.search/search.php', 
      results_container: 'search_results', // default
      input: 'search', // default
      loader: 'loader', // default
      search_interval: 1000
    });
  });

Or, you can do the minimalistic approach, as long as you name your HTML elements with the default names listed above:

  Event.observe(window,'load',function() { new Ajax.Search({
      url: '/ajax.search/search.php'
    });
  });

Check out the source, try it out, break it, and let me know what you think.

AJAX.Search WordPress Plugin

I use the Spotlight feature in OS X an awful lot. While some people would rather use things like Quicksilver, I like just hitting command+space and typing in what Im looking for, be it a document or even an application I want to open.

Thats the inspiration for AJAX.search, a search system built on Prototypes AJAX framework. It will make a call to a URL you specify and display the results under your search box like Spotlight (and now, like the search at Apple.com). From there you can hit the up or down arrow keys to select a result and then hit the enter key to visit the link.

I also built a WordPress plugin that uses AJAX.search in the default search box, and in fact you can test it out on this sites search box right now. By default the plugin will search all your posts and display them in the results grouped by category.

If you want to try it out on your WordPress install, you can download the plugin here. There are still features I still want to implement, and it may not work on all WordPress versions (I’ve only tested on version 2.2.1). Eventually there will be a configuration page in the admin to allow you to change a few settings, such as number of results to display and whether to show categories in the results.

Download the AJAX.search WordPress Plugin version 0.1

If you’re using K2: make sure you turn off Advanced Navigation in the K2 options, since K2 has an AJAX search function that will collide with this one. If you want to keep Advanced Navigation on, you’ll have to comment out the Javascript in the K2 header file that sets up the K2 AJAX search.

Trick your Computer Into Finding Web Sites on Other Servers

Quite often I’ve dealt with moving sites from one hosting situation to another. One issue that comes up is checking to make sure the site works on the new server, but you can’t check it because the domain is still pointing to the old server. Most clients are not okay with just waiting until the DNS switches over to the new server before finding out if their site is broken or not, so what to do? It turns out you can trick your computer into thinking the site really does live on the new server, so you can check it and verify everything is working correctly. Here’s how.

 

Whether you are on Windows, Linux or OS X,  you can tell your computer as event correlation to look for web sites at alternate IP addresses regardless of what DNS servers tell it. There is a hosts file that you can modify to do just that.

 

On Linux and OS X, this file is /etc/hosts, while on Windows it is the C:\WINDOWS\system32\drivers\etc\hosts file. The format is the same on both platforms, so you can use this trick no matter what OS you use. Here is the default one from OS X:

  ##
  # Host Database
  #
  # localhost is used to configure the loopback interface
  # when the system is booting.  Do not change this entry.
  ##
  127.0.0.1       localhost
  255.255.255.255 broadcasthost
  ::1             localhost

The setup is pretty simple. Enter the IP that you want your computer to point to, with the domain name you want it to use. So if you are in the process of moving www.clientwebsite.com from Dreamhost to Bluehost, then you’d find out the IP of the new server at Bluehost and enter at the end of the file like so:

 

  123.123.123.123 www.clientwebsite.com

Now clear out the DNS  cache on your computer to make sure you’re not viewing the site from your DNS cache. On windows, open up the command line and type ipconfig /flushdns. In OS X, open up Terminal and type lookupd -flushcache. I also recommend clearing your browser cache.

 

Open up your browser and go to the web site you just entered in the hosts file. It should now point to the new server. If not, make sure you remembered to flush your DNS cache.

 

Now you can save yourself some trouble with moving sites and make sure they work before you switch them over. Your clients will be happy, and more importantly you’ll have peace of mind that you won’t be getting calls from panicking clients that their site is broken.

Unobtrusive Javascript Pop-up Links

One of the things I dislike the most about writing HTML is creating links that open in new windows. Since I try to make all my HTML standards-compliant, I can’t use the target="_blank" attribute in my links anymore, since it’s been deprecated in XHTML. Many have followed the new standard of making an inline onclick attribute of the link open the window, including myself. But what a pain it is to type it all out and remember the exact code to do it. Instead of this:
  <a href="http://www.example.com" onclick="window.open(this.href); return false;">External Link</a>

Wouldn’t it be easier to type this?

  <a href="http://www.example.com" rel="external">External Link</a>

I’m sure you’ll agree it’s much cleaner, easier to type, easier to remember, and to top it off, it’s (kind of) symantically correct. While the possible attribute values of rel do not include external, using it as a keyword to denote the relationship between an external page and your link makes sense. Best of all it validates with the W3C validator with flying colors.

How to Make it HappenSo how do we make the magic happen? The answer is with our good old friend Javascript. Basically we’re going to make a function that will crawl the document after the page loads and check for links that have rel="external" in it, then attach an Event.observe to each link that will cause it to open in a new window (note that you’ll need Prototype.js for this to work).

Here’s the code:

  function external_link(link) {
    var el = Event.element(link);
    if (el.tagName == 'IMG') {
      if (el.parentNode.tagName == 'A') {
        var el = el.parentNode;
      } else {
        return false;
      }
    }
    window.open(el.href);
    Event.stop(event);
    return false;
  }
  function init() {
    var links = $A(document.getElementsByTagName('a'));
    links.each(function(link) {
      if (link.getAttribute('rel') == 'external') {
        Event.observe(link,'click',function(e){ external_link(e); },false);
      }
    });
  }
  Event.observe(window,'load',init);

Note in the external_link function it checks if the item clicked was an image tag. If it is, then it will look up one node in the DOM tree to see if the image was enclosed in an anchor tag, and attach the event to that instead (since it contains the href it needs to open). If it doesn’t find anything, it will exit quietly.

Load this in your document header and off you go. You should be able to add rel="external" to any link on your page and it will open in a new window. Remember you need a copy of Prototype loaded as well. Leave a comment if have any questions or improvements.