README - Search As You Type
The Search As You Type project makes it easy to add dynamic suggestions
and tab completion to a search box.
We've designed the project so you can get it up and running with sample data out
of the box. Then you can later integrate it with your existing systems by
hooking into a simple server side interface.
System Requirements
Since the bulk of the logic is all encompassed in the provided javascript file
(
search-as-you-type.js), this
project could easily be adapted to any web serving stack you already have in
place. However to make it easier for you to visualize and implement a
fully integrated solution, we've packaged XAMP server side components and
described the full setup in this readme.
The following are required to get
Search As You Type installed and
running against the provided sample data:
-
Apache HTTP Server 2.2.4 or later
-
PHP 5.2.3 or later
We've referenced an easy packaged installation process for these
below.
You can skip that section if you already have these available.
Contents
readme.html
-- this file
sayt/
-- directory of web server resources for the project
search-as-you-type.js -- the main javascript file
with the search as you type logic
search-responder.php -- server component that
returns search suggestions to the browser
test.html
-- sample page with a search box for testing your
installation
test-data.txt --
sample data file
images/
-- directory of image resources for the suggestions UI
styles/
-- directory of style resource for the suggestions UI
Getting Started
To get started with
Search As You Type just follow these simple steps:
-
Download and extract the distribution of this project from
http://code.google.com/p/search-as-you-type/downloads/list
-
If you don't already have the prerequisite Apache HTTP Server and PHP
installed and available, follow
these
instructions to conveniently install them auto-configured to work together.
-
Replace the {resourcesPath} token in
search-as-you-type.js with the
URL to your Search As You Type web directory (i.e.
http://localhost/sayt/)
-
Replace the {ajaxResponderUrl} token in
search-as-you-type.js with URL
of your search-responder file (i.e.
http://localhost/sayt/search-responder.php)
-
Install the provided sayt
directory onto your web server. If you followed the installation
instructions referred to in step 2 above, then this can be done by copying
the sayt directory
under <xampp-install-dir>/xampplite/htdocs/
-
Run the sample queries suggested
below
to verify that you have Search As You Type running correctly
Installation of Apache
HTTP Server & PHP
If you don't already have Apache and PHP installed, then the
XAMPP
project makes it easy to get them installed and configured to run together.
Here are the steps for Windows environments:
-
Download:
-
Install:
-
Extract the zip file into a local directory, we'll call this directory
<xampp-install-dir>
-
Run <xampp-install-dir>/xampplite/setup_xampp.bat
-
Start:
-
Run <xampp-install-dir>/xampplite/apache_start.bat to start
the web server
-
If you get an error message it may be that you have another web server
running that you'll need to shut down. Check this
FAQ
article to help troubleshoot and remember to re-run the apache_start
script above once the issue has been resolved.
-
Test:
-
Verify that the Apache HTTP server is running correctly by loading
http://localhost/
into your web browser and look for the XAMPP logo
This setup is for development purposes only. You should take the necessary
steps to security harden your installation of these components before pushing
this to a production environment. More info about doing this is at
http://www.apachefriends.org/en/xampp-windows.html#1221
The analogous steps for Linux environments are similar and are described in
detail at
http://www.apachefriends.org/en/xampp-linux.html#374.
And the security hardening steps are described here:
http://www.apachefriends.org/en/xampp-linux.html#381.
Sample Data Queries
First be sure you've gone through all of the steps in the
Getting
Started section above.
The sample data (
test-data.txt)
includes some information about actors from
The Internet Movie Database.
Make sure your web server is running as was described in the installation
section
above.
Now
load
http://localhost/sayt/test.html
into your web browser. Try typing the following into the search box
and look for the suggestions and tab completions as you type:
Customizing Search As
You Type for your environment
The provided
search-responder.php
file is fairly lightweight. Its role is simply to respond to a given query
parameter ("query") by returning the appropriate suggestions or tab completion
data to display for that query.
There are two approaches to customize
Search As You Type by hooking into
your own data and logic.
The first approach involves leveraging
search-responder.php by modifying
the implementation of its
GetData
function.
This function
by
default loads the data file
test-data.txt into an array of
records. If you can retrieve your own data from PHP code and get it into
the form of the records read in from
test-data.txt, then modifying
GetData with your own data
retrieval may be the best way to integrate into your environment.
An alternate approach that is more flexible involves creating your own server
component to replace
search-responder.php. This
can be using any server technology or architecture you'd like, with the only
requirement being that the interface to the client
(search-as-you-type.js) must remain
the same. In particular your server component (Java Servlet, CGI script,
JSP page, etc) must accept a query parameter named "query" and it must return
the appropriate data in the form of JSON encoded parameters in a
javascript handler function call. To see this in action, try loading
search-responder.php directly in
your web browser
(
http://localhost/sayt/search-responder.php)
and view the source of the response.