Search autocomplete on search.php page

ajax_bbspost.php

@@ -3,8 +3,30 @@
 
 header("Content-type: application/json; charset=utf-8");
 
-$sql = sprintf_esc("select * from bbs_posts where id = %d limit 1",$_POST["id"]);
-$r = SQLLib::selectRow($sql);
+$sql = new SQLSelect();
+$sql->AddTable("bbs_posts");
+$sql->AddField("bbs_topics.topic as topic");
+$sql->AddField("bbs_topics.id as topicID");
+$sql->AddField("bbs_posts.id as id");
+if ($_POST["search"]) $sql->AddField("'".$_POST["search"]."' as searchQuery");
+$sql->AddField("bbs_posts.post as post");
+$sql->AddField("bbs_posts.added as postDate");
+$sql->AddJoin("left","bbs_topics","bbs_posts.topic = bbs_topics.id");
+
+$r = array();
+if ($_POST["search"])
+{
+  $sql->AddWhere(sprintf_esc("(bbs_posts.post LIKE '%%%s%%' or bbs_topics.topic LIKE '%%%s%%')",_like($_POST["search"]),_like($_POST["search"])));
+  $sql->AddOrder("bbs_posts.added DESC");
+  $sql->SetLimit(5);
+  $r = SQLLib::selectRows( $sql->GetQuery() );
+}
+else if ($_POST["id"])
+{
+  $sql->AddWhere(sprintf_esc("id = %d",$_POST["id"]));
+  $sql->SetLimit(1);
+  $r = SQLLib::selectRows( $sql->GetQuery() );
+}
 
 echo json_encode($r);
 ?>

autocompleter.js

@@ -25,7 +25,9 @@ Autocompleter = Class.create({
       parent.insert(this.finalSelection);
     }
 
-    this.searchBox = new Element("input",{"class":"autocompleteSearch","style":"position:relative","placeholder":this.options.placeholder});
+    var searchBoxOptions={"class":"autocompleteSearch","style":"position:relative","placeholder":this.options.placeholder};
+    if (this.options.searchBox) { searchBoxOptions["name"]="what"; searchBoxOptions["autocomplete"]="off"; }
+    this.searchBox = new Element("input",searchBoxOptions);
     parent.insert( this.searchBox );
 
     if (this.options.dropdown)
@@ -163,6 +165,12 @@ Autocompleter = Class.create({
     {
       var item = li.retrieve("item");
 
+      if (this.options.onClickUrl)
+      {
+        location.href=this.options.onClickUrl+item.id;
+        return;
+      }
+
       this.select( item.id, item.name );
     } 
     else

script.js

@@ -726,6 +726,122 @@ function checkForNewsTickers()
   });
 }
 
+// trims the post content of a bbs topic message, so it fits the autocomplete list
+function trimPostContent(postContent,query,maxlen)
+{
+  if (postContent.indexOf(query)>=0)  
+  {
+    return postContent.substring(Math.max(0,postContent.indexOf(query)-Math.floor(maxlen/2)),postContent.indexOf(query)+Math.floor(maxlen/2));
+  }
+  else
+  {
+    return postContent.substring(0,maxlen);    
+  }
+}
+
+String.prototype.replaceAll = function(strReplace, strWith) 
+{
+  var esc = strReplace.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+  var reg = new RegExp(esc, 'ig');
+  return this.replace(reg, strWith);
+};
+
+// switches between different search types on search page:
+// "prod","group","party","user","bbs"
+function changeSearchType(searchType,pouetContentUrl)
+{
+  var urlArray={"prod":"./ajax_prods.php",
+                "group":"./ajax_groups.php",
+                "party":"./ajax_parties.php",
+                "user":"./ajax_users.php",
+                "bbs":"./ajax_bbspost.php"};
+
+  // empty the search field container
+  var e = document.getElementById("searchInputSpan"); 
+  var child = e.lastElementChild;  
+  while (child) 
+  { 
+    e.removeChild(child); 
+    child = e.lastElementChild; 
+  }   
+
+  // re-add the input field
+  e.innerHTML="<input autocomplete='off' id='pouetSearchInput' type='text' size='25' />";
+
+  if (searchType=="prod")
+  {
+    new Autocompleter(document.getElementById("pouetSearchInput"), 
+    {
+      "dataUrl":urlArray[searchType],
+      "processRow": function(item) {
+        var s = item.name.escapeHTML();
+        if (item.groupName) s += " <small class='group'>" + item.groupName.escapeHTML() + "</small>";
+        return s;
+      },
+      "onClickUrl":"prod.php?which=",
+      "searchBox":true
+    }
+    );
+  }
+  else if (searchType=="group")
+  {
+    new Autocompleter(document.getElementById("pouetSearchInput"), {
+      "dataUrl":urlArray[searchType],
+      "processRow": function(item) {
+      return item.name.escapeHTML() + (item.disambiguation ? " <span class='group-disambig'>" + item.disambiguation.escapeHTML() + "</span>" : "");
+    },
+    "onClickUrl":"groups.php?which=",
+    "searchBox":true
+    });
+  }
+  else if (searchType=="party")
+  {
+    new Autocompleter(document.getElementById("pouetSearchInput"), {
+      "dataUrl":urlArray[searchType],
+      "onClickUrl":"party.php?which=",
+      "searchBox":true
+    });
+  }
+  else if (searchType=="user")
+  {
+    new Autocompleter(document.getElementById("pouetSearchInput"),  {"dataUrl":urlArray[searchType],
+    "processRow": function(item) {
+      return "<img class='avatar' src='"+pouetContentUrl+"avatars/" + item.avatar.escapeHTML() + "'/> " + item.name.escapeHTML() + " <span class='glops'>" + item.glops + " glöps</span>";
+    },
+    "onClickUrl":"user.php?who=",
+    "searchBox":true
+    });
+  }
+  else if (searchType=="bbs")
+  {
+    new Autocompleter(document.getElementById("pouetSearchInput"),  {"dataUrl":urlArray[searchType],
+    "width":500,
+    "processRow": function(item) 
+    {
+      var topicName=item.topic;
+      var postContent=item.post;
+
+      if (topicName.toLowerCase().indexOf(item.searchQuery.toLowerCase())>=0)
+      {
+        topicName=topicName.replaceAll(item.searchQuery,"<span style='background-color:yellow;color:black'>"+item.searchQuery+"</span>")
+      }
+
+      // trim post content to a reasonable size
+      postContent=trimPostContent(postContent.toLowerCase(),item.searchQuery.toLowerCase(),60);
+
+      if (postContent.toLowerCase().indexOf(item.searchQuery.toLowerCase())>=0)
+      {
+        postContent = postContent.replaceAll(item.searchQuery,"<span style='background-color:yellow;color:black'>"+item.searchQuery+"</span>")
+      }
+
+      return "<b>"+topicName+"</b><br/>... "+postContent+" ..." ;
+    },    
+    "onClickUrl":"topic.php?post=",
+    "searchBox":true
+    });
+  }
+}
+
 // on load scripts - keep this to minimum
 document.observe("dom:loaded",function(){
   Cookie.init({name: 'pouetSettings', expires: 365});

search.php

@@ -12,14 +12,14 @@ function __construct() {
   function RenderBody() {
     echo "<div class='content r1'>\n";
     echo "I'm looking for\n";
-    echo "<input type='text' name='what' size='25' value=\""._html($_GET["what"])."\"/>\n";
+    echo "<span id='searchInputSpan'><input id='pouetSearchInput' type='text' size='25' value=\""._html($_GET["what"])."\"/></span>\n";
     echo "and this is a [\n";
 
     $types = array("prod","group","party"/*,"board"*/,"user","bbs");
     $a = array();
     $selected = $_GET["type"] ? $_GET["type"] : "prod";
     foreach($types as $t)
-      $a[] = "<input type='radio' name='type' value='".$t."' id='search".$t."' ".($t==$selected?" checked='checked'":"")." />&nbsp;<label for='search".$t."'>".$t."</label>\n";
+      $a[] = "<input onClick='changeSearchType(this.value,\"".POUET_CONTENT_URL."\")' type='radio' name='type' value='".$t."' id='search".$t."' ".($t==$selected?" checked='checked'":"")." />&nbsp;<label for='search".$t."'>".$t."</label>\n";
 
     echo implode(" |\n",$a);
 
@@ -592,3 +592,11 @@ function GetForwardURL()
 require("include_pouet/menu.inc.php");
 require_once("include_pouet/footer.php");
 ?>
+
+<script>
+document.observe("dom:loaded",function()
+{
+  changeSearchType("prod","<?php POUET_CONTENT_URL ?>");
+}
+);
+</script>