Live Search Plugin
Development and Programming
Starting a new thread since the old one is… well, old.
It uses the autocomplete plugin, Paul’s code and some magic. It’s just one tag, so there isn’t much more to say about it. Demo.
UPDATE: Newest version attached to this post. Now with IE support. Thanks to maximilianschoening for his tests.
Hiya,
Looks useful but I think I must be thick or something as I can’t get it to work I’m afraid. I tried implementing this on the standard 1.6.4 install. I placed the link to the javascript in the head of the page and also the link to the CSS file. Both are linked to fine. I added in the jQuery library before these too.
I then added :
{exp:search:simple_form search_in="everywhere"}
<h2 class="sidetitle">Search</h2>
<input type="text" name="keywords" id="keywords" value="" class="input" size="18" maxlength="100" />
<a href="http://{path=search/index}">Advanced Search</a>
<input type="submit" value="submit" class="submit" /></p>
{/exp:search:simple_form}
<sc*ipt type="text/javasc*ipt">
// The trailing slash is important
$('#keywords').livesearch('/tests/livesearch/');
</sc*ipt>to the site index page and loaded the page. Nothing happens unfortunately. Is there something I’m possibly missing?
Thanks for putting this up for everyone to download though, very much appreciated.
Best wishes,
Mark
Thanks Mark,
I can’t see anything at first glance ( you did create the livesearch template, right? ).
Here are my two test templates:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html >
<head>
<title>Search Test</title>
<link rel="stylesheet" href="http://homepage.dev/livesearch/livesearch.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<scr*pt src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></scr*pt>
<scr*pt src="http://homepage.dev/livesearch/jquery.livesearch.js" type="text/javascript" charset="utf-8"></scr*pt>
</head>
<body>
<h1>Search Test</h1>
<div>
<!-- Currently does not adhere to the search tag options, so a simple textarea works -->
<input type="text" name="keywords" id="keywords" value="" size="18" maxlength="100" />
</div>
<scr*pt type="text/javascript" charset="utf-8">
$('#keywords').livesearch('/test/livesearch/');
</scr*pt>
</body>
</html>{exp:live_search:results link="comment"}ps. It only searches the weblog titles right now
Something I just noticed - if you have debugging turned on (and are logged in as a superadmin) it throws a notice.
Try going directly to the results template with a search term in the 3rd segment: example. Do you get any output?
EDIT: Squashed the bug, and updated the download
Hiya,
Yep I have the template created with the plugin code in it. I also tested going to the URL as you mentioned and I do get results a bit like your example but it still just won’t do anything when I type into the text field for some reason.
I must be thick or something I reckon! 😉 Wonder if anyone else has downloaded this yet and got it to work?
Could it be because I am testing this on a localhost install using MAMP on OSX?
Best wishes,
Mark
Mark, thank you very much for your patience with this.
I’m testing on MAMP as well, so I don’t think that’s it. The only thing that every caused problems for me as I was developing was the result. That’s probably best compared with the no-result case. A nonsense query should look exactly like this.
I have attached a totally isolated javascript test case (plain php, no EE, all files in one folder) if you want to give that a try. I have this working on two separate setups, so I’m at a loss. If anyone else wants to give it a shot, it would be much appreciated.
Hi Pascal,
Well I finally got this working! 😉
Turns out that I needed to do this instead :
// The trailing slash is important
$('#keywords').livesearch('{site_url}index.php/site/livesearch/');Now the page comes up and the search box does work but I can’t seem to get the CSS working with it so that you can use the up and down arrows to go between the results like you have on your homepage.
I have attached an image of what I have at the moment to this post. I didn’t do anything other than paste in the same template that you showed above so that’s why there isn’t any styling to the page as of yet but I just can’t seem to use the up and down keys to go through the result set.
Is there something I am missing at all?
Thanks again for the help on this.
Best wishes,
Mark
Hey Mark,
It doesn’t look like it’s picking up the css at all. Can you get to the stylesheet manually? All you really need for the navigation effect is the .ac_over class. Does it work with an inline stylesheet?
<style type="text/css" media="screen">
.ac_over {
background-color: #0A246A;
color: white;
}
</style>Hmmph!!
All working now. I have placed the whole link to the stylesheet which at the moment is in an ExpressionEngine template stored in the database. I was originally using a global variable to store the template group etc but when I viewed what the template was spitting out it wasn’t giving the whole link to the CSS template for some reason.
Placing in a full server path to the CSS file now allows it to work, and work it does!!
Excellent!
Thanks for the plugin, I’m sure it will come in handy at some point or another.
Best wishes,
Mark
Hey, I really like this plugin. Thanks for sharing, can’t wait to see custom fields and such. :coolsmile:
Hey guys, awesome plugin but I think I’m too stupid to make it work. First of all I don’t get any autosuggestions and when I hit enter I get this: [{ "title" : "No results", "path" : "#" }]!
Now if I use my url directly and append the search term to the last segment I get a search result similar to the one posted above! What am I doing wrong? Do I have to set something up in the CP?
Thanks, Max
Hey Max,
Can I assume that your tweet means you’ve made it work? If not: It sounds like the javascript isn’t hijacking the form properly. There is nothing that needs to be done in the CP.
The obvious contestants: a) Is jQuery included in the page b) Is the selector correct c) Is the url correct
That’s where I would start.
Cheers, Pascal
Hey, works great! Will post the final result as soon as I’m done! The only thing is the “buginess” in IE!
Thanks, Max
Has anyone tested this in IE 6 or 7? I have it working in Safari, FF, etc… but not IE. I took a look at Pascal’s site and it doesn’t work in IE either.
Hey, an update should be coming soon 😉! I’m shure Pascal Kriete will post it here.