del.icio.us .:. tweet

SpiffY!Search .:. kentbrewster.com

For a good time, mouse over Madonna

SpiffY!Search--"Semi-Permeable Inline Free-Form Yahoo! Search," if you just can't stand not knowing--uses Yahoo!'s Web Search APIs and Related Suggestion APIs to field search queries and return them in JSON format, wrapped in handy JavaScript callbacks. From there it's a (fairly) trivial exercise to allow user interaction through dynamic script nodes.

A Brief Word of Warning....

SpiffY!Search was my very first (and favorite) inline search thingamabob. While much of it is still solid, it's growing long in the tooth, and is in dire need of an upgrade. It's here because there are a ton of links pointing back to it, and I didn't want to just cut everybody loose in space. Someday When I Have Time™, there will be a re-write.

If you'd like to see what I've been doing recently around inline badges, please check out Case-Hardened JavaScript.

Things to Do and Notice:

  • Enter the word "madonna" into the search box, or just mouse over the highlighted version in the headline, back there at the beginning of this sentence. You should receive the top ten English search results for the Material Girl, beginning (oddly enough) with madonna.com.
  • Any highlighted item on the page is a hot spot: mouse over it to automatically transferred its contents to the search blank, and watch as results pop up. To create a hot spot on your page, decide what tag you want to use--I've hijacked the little-known "s" tag--and tag your spots. Be sparing with these; the user experience can get really sucky if there are too many hot spots, or they're too close to the form.
  • To see details for any of the results, hover over the title. To see the next ten results, click "next." To back up ten results once you've moved forward, click "prev."
  • Chose other search modes like Images or Video from the drop-down list.
  • Next, observe the notation "kentbrewster.com." That's the initial default domain, which will come up for whatever root domain the page is hosted on.
  • If you click the checkbox, the results link should change to "from kentbrewster.com." I've got one blog post, "Embarassing Moment #65535," which mentions a Madonna song; once everything's been updated, it ought to show in the list.
  • If you click the bit that says "Powered By Yahoo! Search," you'll go to the appropriate page of Yahoo! search results for your query, restricted to hits on mindsack.com only. (If you've restricted the domain, you'll see only the appropriate page of results from that domain.)
  • To change the domain from"kentbrewster.com to something else, either shift-click any of the results or click inside the domain name and enter it by hand. If you hand-enter a domain you'll need to click outside the entry field to let SpiffY!Search know you're done.
  • To try one of the See Also results, click it.
  • To save a page to Yahoo!'s MyWeb 2.0 system, click the little @-sign in the list of titles. (You may need to unblock pop-up windows, sign in on the Yahoo! network, and possibly initialize My Web to do this ... but it's worth it!)
  • To close your results, delete whatever's in the search blank, or click "close this" at the bottom.

Get This For Your Site

To get SpiffY!Search for your site, click the bit that says "get this for your site." Which, concidentally, will bring you right back here.

You'll want to save the structure, behavior, and presentation into three separate files on your desktop. Drag the structure file into your browser, and you ought to see something working immediately.

Here's the structure:

<div id="ss">SpiffY!Search:
   <input value="">
   <select></select>
   <input type="checkbox" class="c">
   <input>
   <dl>
      <dt class="nav">
         <a class="dir prev">prev</a> <a>Powered by Yahoo! Search</a> <a class="dir next">next</a>
      </dt>
      <dt class="also"></dt>
      <dt class="help">
         <a>close results</a> - <a>get this for your site</a>
      </dt>
   </dl>
</div>

Here's the behavior:

Here's the presentation:

Comments from before Disqus:

VM Ware .:. 2010-09-16 09:12:19
one thing I have to say is that in spite of all Spiffy search’s popularity, I really think that it is essential that they start to upgrade themselves because if we look around, we can see that many of its rivals have already started doing that and it is only a matter of time that they start losing their insurance which they once proudly held! I, however do think that there is still time for a change and they really can add some more entertaining features as well!

Copyright Kent Brewster 1987-2014 .:. FAQ .:. RSS .:. Contact