It's all demo stuff, everything gets processed by the server, but no actual lookups going on. So some crude rules apply here ...
There are no answers here, only questions.
I'm interested in your compatability dillema. If you've got Javascript enabled and it's not working, please tell me what browser you're using.
Yeah, lame. The main point here is that all the terms are sent to the server, which decides on the categories. You could imagine it providing other info too, like an estimate of the result quantity. Or the results themselves.
Do you have any suggestions for a way to make the demo more realistic? Please send pointers to any interesting data repositories which could be held entirely in a memory cache of a few megs. Or any categories which could be calculated algorithmically.
Calls to the server are made by ajax.js, which offers a facade to the XMLHttpRequest object. so you can do this:
callServer(url, 'drawInitialCategories', true, true, null, postvars);
... Which calls the given URL and sends the response to the drawInitialCategories() callback method. The options specify plain-text response (not XML), GET request (not POST), and null calling context object to be passed back to the callback method. Postvars is an array of variables passed as part of the request.
The library builds on some ideas posted by Richard Schwartz. And, more specifically, code posted in a comment there by John Wehr. John's just started AjaxKit and I've been talking to him about contributing.
The library is seriously untested, so right now, use (if at all) with caution. The main benefit is thread safety. Compared to the standard pattern, which uses a global XMLHttpRequest, a new one is created each time. It's also destroyed after the response returns.
The categories are downloaded using a query to the server upon load. To keep things simple, image names are based on categories. Each image is then added to a fragment, and the whole thing is added to a div on the page in one final operation.
categoriesFragment = document.createDocumentFragment();
for (i=0; i<allCategoryNames.length; i++) {
categoryName = allCategoryNames[i];
var categoryImg = document.createElement("img");
categoryImg.id = categoryName + "Category";
categoryImg.src = "http://localhost/ajax/liveSearch/images/"+categoryName+".gif";
categoryImg.style.backgroundColor="#cccccc";
categoryImg.title = categoryName;
categoriesFragment.appendChild(categoryImg);
}
document.getElementById("categories").appendChild(categoriesFragment);
function requestValidCategories() {
...
...(Call the server if the query has changed)...
...
setTimeout('requestValidCategories();',50);
}
The mechanism above shoots off a query to the server whenever the query has recently changed. It's an asynchronous query, so the response will be sent to a callback method. In this case, updateValidCategories. UpdateValidCategories walks through each category and decides if it's currently valid. Based on its validity, it updates the background colour, cursor, and onclick action. Note that the images are transparent, so it's easy to turn them on and off by flicking the background colour.
if (validCategoryNames[categoryName]) {
categoryImg.style.backgroundColor="yellow";
categoryImg.style.cursor="pointer";
categoryImg.title = "Category '" + categoryName + "'" +
" probably has results";
if (categoryImg.setAttribute) {
categoryImg.setAttribute("onclick",
"onCategoryClicked('" + categoryName + "')");
}
...
} else {
...
... (turn it off) ...
...
}