LiveInfo is directly evolved from Livesearch. If you don’t know what liveSearch is, liveSearch allowed users to search a website while still viewing the current page. The original can be seen here. Wanting to make use of liveSearch for one of my own projects, I proceeded to make some changes from which evolved LiveInfo. LiveInfo is a framework for multiple, real time, skinnable updatable elements within a web page. You can see LiveInfo in action on my blog where there are two LiveInfo elements. One is the blog search and the other is the UK TV listings (SynTV) search on the side.
From the client side, LiveInfo improves upon the original in the following areas
- Support for more browsers
- Internet Explorer 5+ (Win)
- Gecko based browsers
- Opera 7+
- Should work with IE Mac, Konqueror etc. Needs testing
- Multiple LiveInfo elements on one page
- Pageable results (Keyboard navigation via left, right, up and down keys)
- Support for multiple element forms
Utilising a small backend framework, LiveInfo also provides the following functionality
- Cacheable Results
- Dynamic forms
- Skinnable Results
- Plugin support (services)
- Webservices support (via plugins)
LiveInfo comes with four services. These are as follows:
- Wordpress search - Searches a wordpress blog
- Google Search - A simple Google search. Uses Googles SOAP API.
- SynTV Search - Search UK TV listings using the syntv.com XMLRPC webservice
- SynTV Listings - Displays UK TV listings using the syntv.com XMLRPC webservice
The latest version of liveInfo can be found on my downloads page.
Installation
Extract the zip and upload the liveInfo directory to your server. I recommend uploading it to the root directory. Wherever you upload it, edit the liveInfoDir node in the liveInfo/liveInfo.xml file to point to it. The value should be a relative path and must not have an ending /. Any new services should be copied into the services directory and any css files into the css directory. Lastly make sure the cache directory is writable. You’ll need to edit the xml file for each service to suit your install but instructions are given
How it works
When a user interacts with a form, using either the XMLHttpRequest object or an iframe depending on browser capability, a request is made to the server.
Whatever the results the server returns some XML from which the relevant elements are extracted and displayed.
The xml document that is returned by the server is actually an XML document with a html namespace. The reason for this is that the normal method of using innerHTML to rewrite elements won' work on some browsers that support true XHTML documents (xml files sent with the correct application/xhtml+xml header). The workaround for this is to use the document.importNode method to import nodes from one document into another. Note this compatibilty with true XHTML documents was one of the last features to be put in and hasn’t yet been tested fully on true XHTML documents. I will update when I test more fully.