Page last modified 18:05, 11 Sep 2009 by rberinger
MindTouch Community Portal > App Catalog > Search suggestion tool using the MindTouch API > How do I... Make an ajax search suggest tool using the MindTouch API
How do I... Make an ajax search suggest tool using the MindTouch API Contributors
Views:
> Full Code
Views:
> Full Code
Any questions or comments should be directed to this forum thread
HTML
In order to get our search suggest working we need to layout some basic HTML. This HTML includes the search input and the dropdown menu that will later get populated by jQuery. You must add this HTML to a MindTouch page in source mode.
<input type="text" id="search-input"> <div id="search-suggest"> <a href="#" class="close">x</a> <div class="search-pages"> <strong>pages</strong> </div> <div class="search-files"> <strong>files</strong> </div> <div class="search-comments"> <strong>comments</strong> </div> </div>
JQUERY
Now that you know how to access the API and you have your base HTML you need to connect all the parts. Again this needs to be entered in source mode. I've added some highlighted comments to walk you through the jquery.
<script type="text/javascript">
$("body").ready( function() {
$("#search-suggest a.close").click( function() {
$("#search-suggest").hide();
return false;
});
$("#search-input").keyup( function() {
if ($(this).val()==''){
$("#search-suggest").hide();
return false;
}
var q = $(this).val();
clearTimeout($.data(this, "timer"));
var ms = 400; //milliseconds
var wait = setTimeout(function() {
loadsearch(q);
}, ms);
$.data(this, "timer", wait);
});
});
function loadsearch(q) {
var qurl="http://developer.mindtouch.com/@api/deki/site/search?limit=10&q="+q;
var cntpage=0;
var cntfile=0;
var cntcomments=0;
jQuery.get(qurl, function(xml) {
$("#search-suggest .search-pages a").remove();
$("#search-suggest .search-files a").remove();
$("#search-suggest .search-comments a").remove();
$("#search-suggest .search-comments span").remove();
$(xml).find('search > page').each(function(){
var qpath = $(this).find(" > path").text();
var qtitle = $(this).find("> title").text();
$("#search-suggest .search-pages ").append('<a class="page" href="/' + qpath + '">' + qtitle.substr(0,30) + '</a>');
cntpage++;
});
$(xml).find('search > file').each(function(){
var quri = $(this).find(" > contents").attr("href");
var qtitle = $(this).find(" > filename").text();
$("#search-suggest .search-files").append('<a class="file" href="' + quri + '">' + qtitle + '</a>');
cntfile++;
});
$(xml).find('search > comment').each(function(){
var quser = $(this).find("username").text();
var qcomment = $(this).find(" > content").text();
var quri = $(this).find("path").text();
$("#search-suggest .search-comments").append('<a href="/' + quri + '" class="comment-user">' + quser + '</a><span class="comment-text">' + qcomment.substr(0,40) + '...</span>');
cntcomments++;
});
if(cntpage>0){
$("#search-suggest .search-pages").show();
}else {
$("#search-suggest .search-pages").hide();
}
if(cntfile>0){
$("#search-suggest .search-files").show();
}else {
$("#search-suggest .search-files").hide();
}
if(cntcomments>0){
$("#search-suggest .search-comments").show();
}else {
$("#search-suggest .search-comments").hide();
}
if(cntpage>0 || cntfile>0 || cntcomments>0){
$("#search-suggest").show();
}else {
$("#search-suggest").hide();
}
});
}
</script>
CSS
Lastly, once you've got it working it needs to look good, otherwise it might not be legible at all. I've put some simple CSS together but feel free customize the look & feel.
<div>
<style>
#search-suggest strong{
margin:0 0 10px 0;
color:#999;
display:block;
}
#search-suggest {
border:1px solid #ccc;
display:none;
padding:0;
position:absolute;
overflow:hidden;
background:#fff;
font-size:11px;
min-width:150px;
}
#search-suggest .search-pages{
float:left;
padding:5px 20px;
max-width:200px;
}
#search-suggest .search-files{
float:left;
padding:5px 20px;
max-width:200px;
}
#search-suggest .search-comments{
float:left;
padding:5px 20px;
max-width:200px;
}
#search-suggest a {
display:block;
padding:0 0 0 20px;
height:16px;
overflow:hidden;
margin:0 0 5px 0;
background-image:url(/skins/common/icons/icons.gif);
background-repeat:no-repeat;
}
#search-suggest .search-pages a {
background-position:0 -768px;
}
#search-suggest .search-files a {
background-position:0 -1040px;
}
#search-suggest .search-comments .comment-user {
display:block;
font-weight:bold;
margin-bottom:0px;
padding:0;
}
#search-suggest .search-comments .comment-text {
display:block;
font-weight:100;
margin-bottom:10px;
color:#999;
}
.no-show {
display:none;
}
#search-suggest a.close{
float:right;
display:block;
font-size:14px;
width:15px;
padding:0 0 1px 0;
line-height:1;
-moz-border-radius:7px;
border:2px solid #fff;
font-weight:bold;
text-align:center;
background:#ccc;
color:#fff;
text-decoration:none;
}
#search-suggest .close:hover{
background:#9f1313;
text-decoration:none;
color:#fff;
}
</style>
</div>
- Was this page helpful?
- Tag page
- What links here
| Images 0 | ||
|---|---|---|
| No images to display in the gallery. |
Copyright © 2011 MindTouch, Inc. Powered by
For completeness it might be nice to toss in a "search" button next to the input field.
Finally, for maximum usefulness, I'd put this in a template and add a parameter that allows you to search only within a particular tree. This would make it a very very nice local search mechanism for an area of a wiki. This should only affect the construction of the qurl variable.
This kind of thing should be in the core product - it's too cool to have as an add-on only!
Blog post to compliment this feature: http://blog.developer.mindtouch.com/2009/09/11/writing-ajax-search-suggestions-using-the-mindtouch-api/
Thanks for the support
Damien