LebGeeks

Nabs

Member

Instant search on websites

I can't find out what this is called. Let's say you have a page with content and a search box. As soon as you start typing inside the box, the content gets filtered out to fit the search. To be more clear, similar to how you search on iPhone or Avafind on computers. Anybody ever used this, if so, what's it called? You know, for websites.

Ra8

Member

Re: Instant search on websites

Maybe you're thinking about auto-complete or IntelliSense. I think you can implement those with a Trie data structure or something similar.
Maybe this can help too.

Nabs

Member

Re: Instant search on websites

Hi, Ra8, no not the autocomplete or IntelliSense. Those two require you to press for function afterwords and fetch results.

What I'm looking for is an instant way to show the data on a page. You type the name and everything else on the page disappears leaving just the info you requested.

rolf

Member

Re: Instant search on websites

I call it "live search" because you can see the results "live":
Here is an example I did myself:

http://dergham.com/books

As you can see it is almost instant, even on a Lebanese connection. I did not use any plugins, coded it myself, it's not too complicated and allows for the performance that you see.

There's just one problem I'm having right now, thumbnails are not cached, but that doesn't have to do directly with the live search, but more with the way they are served, and I'm looking into it right now.

samer

Admin

Re: Instant search on websites

You'll need to use a filter function (present in underscore and jQuery).

Nabs

Member

Re: Instant search on websites

@Rolf, that's what I'm looking for. Where can I find a similar code, please?

samer

Admin

Re: Instant search on websites

@Nabs, Rolf's example actually fetches the results via Ajax.

	$.ajax({
		url: "ajax.php",
		data: data,
		dataType: 'json',
		context: $("#maincol"),
		success: function(received){
(...)

Perhaps you're looking for something like isotope?

rolf

Member

Re: Instant search on websites

@Rolf, that's what I'm looking for. Where can I find a similar code, please?

Do you want to fetch results from the server or just filter elements which are already on the page?
I don't know more than you about any ready-to-use code, but I could guide you through the steps to follow if you want to implement it yourself.

Last edited by rolf (November 11 2013)

Nabs

Member

Re: Instant search on websites

I want to filter elements on page.

rolf

Member

Re: Instant search on websites

I want to filter elements on page.

Then Samer's suggestion are probably all you need...
I'm not sure about the jQuery filter function, how it works, I guess it goes something like that:

$("#myInput").on('change', function(){
    $("#myCollection .element").removeClass("visible");
    $("#myCollection .element").filter($("#myInput").value()).addClass("visible");
});

Untested code and I have no idea if that's how you're supposed to use that function! There are better ways to do it, if it works at all.
In your CSS you'll need something like:

#myCollection .element {
  visibility: hidden;
  opacity:0;
  /* you could add some nice CSS3 transitions here, but that's a complicated subject */
}

#myCollection .element.visible {
   visibility: visible;
   opacity: 1;
}

You could probably also throw in some throttling but in my experience that's not absolutely necessary, but desirable.
Or try that isotope thing that Samer suggested.

Last edited by rolf (November 11 2013)