I’ve implemented a new feature on my blog, which I think is pretty cool.
Over the the right is a new box labelled: Beta: Inline Search. Try typing something into it, and pressing return, or clicking the button.
Wait a few seconds (depending on connection speed) and search results for this blog should appear underneath.
It’s still fairly rudimentary - I plan to make a “working” indicator, plus the ability to search for more results. But I guess you want to see the code…
function SearchBlog(){ window.searchreq = new XMLHttpRequest(); var s=document.getElementById("s").value.replace(/ /g,"+"); searchreq.open("POST","/category/&s="+s); searchreq.onload = UpdateSearchResults searchreq.send("") } function UpdateSearchResults(){ if (searchreq){ if (searchreq.status==200) { data = searchreq.responseText.split("<body>")[1].split("</body>")[0]; temp = document.createElement("div"); temp.innerHTML = data; if (temp.getByClass) { results = temp.getByClass("post-title"); } var resList = "Results:<ul>"; for (var i=0;i < results.length; i++){ resList = resList + "<li>"+results[i].innerHTML+"</li>"; } resList = resList + "</ul>"; document.getElementById("searchresults").innerHTML = resList; data = ""; temp = ""; resList = ""; } } }
You will need to have a getByClass() function installed - if you don’t, it’s:
/* Thanks to Dustin Diaz for this one: http://www.dustindiaz.com/getelementsbyclass/ */ document.getByClass = function(searchClass,tag){ var classElements = new Array(); if (tag==undefined){tag="*";} var els = this.getElementsByTagName(tag); // use "*" for all elements var elsLen = els.length; var pattern = new RegExp("(^|\s)"+searchClass+"(\s|$)"); for (i = 0,j = 0; i < elsLen; i++) { if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; } } return classElements; }
Barbarella • Ferrante & Teicher • Ultra-Lounge, Vol. 16: Mondo Hollywood ★½
Great job! I was afraid the JS was gonna be super large when you mentioned “parsing html”. Did not realize that there is a getElementsByTagName function. For the indicators, I would look at http://www.napyfab.com/ajax-indicators/ unless you want to create a new one. (remember the dial from the old Sun OS installs ? he, he)
I will try to implement your function on the test site and see.
11 minutes after the fact.
Why this ?
searchreq.open("POST","/category/&s="+s);21 minutes after the fact.
Basically this is the only url I could construct that would generate search results. If you just use
"/&s="then it fails to get a page.You can hijack this to get searching within a category, which I’ll add later.
1 hour, 14 minutes after the fact.
Ooh, big breakthrough:
http://schinckel.blogsome.com/category/&s=beard/feed/
1 hour, 18 minutes after the fact.
Tradeoff between /feed/ and /page/n/. Do’h.
1 hour, 20 minutes after the fact.
That feed thing is big indeed. I guess it was always possible — we never paid attention to it - right ?
2 hours, 9 minutes after the fact.
Whilst it’s not working in IE, at least it degrades nicely: it just loads the normal search page.
4 hours, 32 minutes after the fact.
It may work in IE now, but I’ve turned off the PC.
Also, I’ve started to write some prefetch code to improve performance on “Older”/”Newer” button clicks. However, I’ve not implemented it, as I need to go to bed…
5 hours, 4 minutes after the fact.
I’m not sure why, but now it takes a while to actually finish putting the search results up. It’s acutally kind of cool - it looks like it’s scanning through in real time…
Turning Japanese • The Vapors • Essential Eighties ☆½
1 day, 1 hour after the fact.
looks like your *other* website is back online, thus enabling a whole bunch of features back again (including inline search etc)
have you thought of using a similar ajax.request code to bring up the page from the search results ?
have a look at http://rajeev.blogsome.com/category/1/. Clicking any any of the category links will bring up that post using ajax..
1 week, 1 day after the fact.
Yeah, I have thought a bit about having AJAX Blogsome, but I might not implement it. It’s probably something that would be easier to do from scratch, with a clean WordPress install.
If I ever get around to setting up a home host, I might do it there.
1 month, 2 weeks after the fact.
Yes, and damn my ISP hosting service - it seems to be rather flaky. Might have to move the scripts back to Blogsome… it’s down again right now, for instance.
1 month, 2 weeks after the fact.
Thats quite impresive.
Same i gave up my sidebar
I would of loved to have had that replace the standerd search forms you get.
5 months after the fact.
well i re-coded my site to have a side bar (i missed it too much)
i got the search to work a bit i enter in the word i want to search for it dose the searching but dosnt come up with any results
it just keeps on saying searching
5 months after the fact.
ok i got it to work
how could i make the results come down in a shelf like http://kreaper.blogsome.com/ has done as it would save my sidebar space
5 months, 1 week after the fact.
Dunno. But he’s pretty helpful, you can ask him. I think he may have used a toolkit from somewhere.
5 months, 1 week after the fact.
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.
[ Antoine de Saint-Exupery ]
Cool “getbyclass” function script above…really short and nifty…
The ability to find all the elements that have a particular attribute can be pretty handy when you need to modify all elements that have the same class or title, for example.
I was working on my profile page and in order to find elements with a particular attribute value, I needed to check every element on the page for that attribute. This is a very calculation-intensive operation, so it shouldn’t be undertaken lightly. If you wanted to find all input elements with type=”checkbox”, you’re better off limiting your search to input elements first:
var inputs = document.getElementsByTagName("input");
for (var i = 0; i
This will require less calculation than iterating through every element on the page and checking its type. However, the function presented in this solution — getElementsByAttribute — is ideal when you need to find a number of elements of different types that have the same attribute value.
The easiest way to check every element on a page is to loop through the collection returned by getElementsByTagName(”*”). The only problem with this method is that Internet Explorer 5.0 and 5.5 do not support the asterisk wildcard for tag selection. Luckily, these browsers support the document.all property, which is an array containing all the elements on the page. getElementsByAttribute handles this issue with a simple code branch, then proceeds to check the elements for a given attribute value, adding matches to an array to be returned:
//get_elements_by_attribute.js//
function getElementsByAttribute(attribute, attributeValue){
var elementArray = new Array();
var matchedArray = new Array();
if (document.all)
{
elementArray = document.all;
}
else
{
elementArray = document.getElementsByTagName("*");
}
for (var i = 0; i
9 months after the fact.
//get_elements_by_attribute.js//
function getElementsByAttribute(attribute, attributeValue){
var elementArray = new Array();
var matchedArray = new Array();
if (document.all)
{
elementArray = document.all;
}
else
{
elementArray = document.getElementsByTagName("*");
}
for (var i = 0; i
9 months after the fact.
//get_elements_by_attribute.js//
function getElementsByAttribute(attribute, attributeValue)
{
var elementArray = new Array();
var matchedArray = new Array();
if (document.all)
{
elementArray = document.all;
}
else
{
elementArray = document.getElementsByTagName("*");
}
for (var i = 0; i
9 months after the fact.
//get_elements_by_attribute.js//
function getElementsByAttribute(attribute, attributeValue)
{
var elementArray = new Array();
var matchedArray = new Array();
if (document.all)
{
elementArray = document.all;
}
else
{
elementArray = document.getElementsByTagName(”*”);
}
for (var i = 0; i
9 months after the fact.