[TUTORIAL] Search autocomplete

Propose here your templates, your plugins or ask one.
All tutorials available for Arfooo Directory are available in this category.

Moderator: effi

[TUTORIAL] Search autocomplete

Postby ping » Mon May 04, 2009 1:10 am

Script used: (you don't need to download it, just for reference)
SearchField written by Alen Grakalic, provided by Css Globe (cssglobe.com)
please visit http://cssglobe.com/post/1202/style-you ... with-jscss for more info


add this to your template/xxxx/css/style.css
ps: change to whatever fits your site design
Code: Select all
/*

   SearchField   
   by Alen Grakalic, brought to you by cssglobe.com
   
*/

/* default (inactive field) */
.sf_inactive{
   border:2px #3d91a5 solid;
   background:#3d91a5;
   color:#b4d3db;
}
/* on focus (when field is clicked on)  */
.sf_active{
   border:2px #8BB544 solid;
   background:#fff;
   color:#333;
}
/* with text (when field is inactive but contains user's input)  */
.sf_text{
   border:2px #3c90a5 solid;
   background:#fff;
   color:#888;
}

/* suggestions box */
/* js code generates unordered list */
.sf_suggestion{
   position:relative;
}
.sf_suggestion ul{
   position:absolute;
   margin:0;
   padding:0;
   background:#86BAC7;
   top:0;
   left:0;
}
.sf_suggestion li{
   margin:0;
   padding:0;
   list-style:none;
}
.sf_suggestion li a{
   display:block;
   text-indent:5px;
   color:#fff;
}
.sf_suggestion li.selected a{
   background:#3D91A5;
}


open template/xxxxx/menu/menuleft.php:
add this in the first line:
Code: Select all
{php}
include ("path/autocomplete.php");
{/php}


replace your old search box with this code:
Code: Select all
<form action="{'/site/search/1'|url}" method="post">
      <form id="searchform" action="" method="post">
      <input type="text" name="phrase" id="ac" name="ac" value="Loading..." />
         <button type="submit" id="ping">Search</button>
         <input type="hidden" name="isNewSearch" value="true" />
</form>


create a new file called autocomplete.php and do the necessary edit to the code (your database, etc)
also you might need to change the arfooo_
Code: Select all
<?php
$autoc = '';
mysql_connect("MYSQL ADRESS", "MYSQL LOGIN", "MYSQL PASSWORD");
mysql_select_db("NAME_OF_THE_DATABASE");
$sql = mysql_query("SELECT siteTitle FROM arfooo_sites order by siteTitle asc");
while($x = mysql_fetch_assoc($sql)){
$autoc = $autoc . $x['siteTitle'] . ', ';
}
?>
<script language="JavaScript">
/*

   SearchField
   written by Alen Grakalic, provided by Css Globe (cssglobe.com)
   please visit http://cssglobe.com/post/1202/style-your-websites-search-field-with-jscss/ for more info
   
*/

this.searchfield = function(){
   
   // CONFIG
   
   // this is id of the search field you want to add this script to.
   // You can use your own id just make sure that it matches the search field in your html file.
   var id = "ac";
   
   // Text you want to set as a default value of your search field.
   var defaultText = "Search";   
   
   // set to either true or false
   // when set to true it will generate search suggestions list for search field based on content of variable below
   var suggestion = true;
   
   // static list of suggestion options, separated by comma
   // replace with your own
   var suggestionText = '<?=$autoc?>';
   
   // END CONFIG (do not edit below this line, well unless you really, really want to change something :) )
   
   // Peace,
   // Alen

   var field = document.getElementById(id);   
   var classInactive = "sf_inactive";
   var classActive = "sf_active";
   var classText = "sf_text";
   var classSuggestion = "sf_suggestion";
   this.safari = ((parseInt(navigator.productSub)>=20020000)&&(navigator.vendor.indexOf("Apple Computer")!=-1));
   if(field && !safari){
      field.value = defaultText;
      field.c = field.className;      
      field.className = field.c + " " + classInactive;
      field.onfocus = function(){
         this.className = this.c + " "  + classActive;
         this.value = (this.value == "" || this.value == defaultText) ?  "" : this.value;
      };
      field.onblur = function(){
         this.className = (this.value != "" && this.value != defaultText) ? this.c + " " +  classText : this.c + " " +  classInactive;
         this.value = (this.value != "" && this.value != defaultText) ?  this.value : defaultText;
         clearList();
      };
      if (suggestion){
         
         var selectedIndex = 0;
                  
         field.setAttribute("autocomplete", "off");
         var div = document.createElement("div");
         var list = document.createElement("ul");
         list.style.display = "none";
         div.className = classSuggestion;
         list.style.width = field.offsetWidth + "px";
         div.appendChild(list);
         field.parentNode.appendChild(div);   

         field.onkeypress = function(e){
            
            var key = getKeyCode(e);
      
            if(key == 13){ // enter
               selectList();
               selectedIndex = 0;
               return false;
            };   
         };
            
         field.onkeyup = function(e){
         
            var key = getKeyCode(e);
      
            switch(key){
            case 13:
               return false;
               break;         
            case 27:  // esc
               field.value = "";
               selectedIndex = 0;
               clearList();
               break;            
            case 38: // up
               navList("up");
               break;
            case 40: // down
               navList("down");      
               break;
            default:
               startList();         
               break;
            };
         };
         
         this.startList = function(){
            var arr = getListItems(field.value);
            if(field.value.length > 0){
               createList(arr);
            } else {
               clearList();
            };   
         };
         
         this.getListItems = function(value){
            var arr = new Array();
            var src = suggestionText;
            var src = src.replace(/, /g, ",");
            var arrSrc = src.split(",");
            for(i=0;i<arrSrc.length;i++){
               if(arrSrc[i].substring(0,value.length).toLowerCase() == value.toLowerCase()){
                  arr.push(arrSrc[i]);
               };
            };            
            return arr;
         };
         
         this.createList = function(arr){            
            resetList();         
            if(arr.length > 0) {
               for(i=0;i<arr.length;i++){            
                  li = document.createElement("li");
                  a = document.createElement("a");
                  a.href = "javascript:void(0);";
                  a.i = i+1;
                  a.innerHTML = arr[i];
                  li.i = i+1;
                  li.onmouseover = function(){
                     navListItem(this.i);
                  };
                  a.onmousedown = function(){
                     selectedIndex = this.i;
                     selectList(this.i);      
                     return false;
                  };               
                  li.appendChild(a);
                  list.setAttribute("tabindex", "-1");
                  list.appendChild(li);   
               };   
               list.style.display = "block";            
            } else {
               clearList();
            };
         };   
         
         this.resetList = function(){
            var li = list.getElementsByTagName("li");
            var len = li.length;
            for(var i=0;i<len;i++){
               list.removeChild(li[0]);
            };
         };
         
         this.navList = function(dir){         
            selectedIndex += (dir == "down") ? 1 : -1;
            li = list.getElementsByTagName("li");
            if (selectedIndex < 1) selectedIndex =  li.length;
            if (selectedIndex > li.length) selectedIndex =  1;
            navListItem(selectedIndex);
         };
         
         this.navListItem = function(index){   
            selectedIndex = index;
            li = list.getElementsByTagName("li");
            for(var i=0;i<li.length;i++){
               li[i].className = (i==(selectedIndex-1)) ? "selected" : "";
            };
         };
         
         this.selectList = function(){
            li = list.getElementsByTagName("li");   
            a = li[selectedIndex-1].getElementsByTagName("a")[0];
            field.value = a.innerHTML;
            clearList();
         };         
         
      };
   };
   
   this.clearList = function(){
      if(list){
         list.style.display = "none";
         selectedIndex = 0;
      };
   };      
   this.getKeyCode = function(e){
      var code;
      if (!e) var e = window.event;
      if (e.keyCode) code = e.keyCode;
      return code;
   };
   
};

// script initiates on page load.

this.addEvent = function(obj,type,fn){
   if(obj.attachEvent){
      obj['e'+type+fn] = fn;
      obj[type+fn] = function(){obj['e'+type+fn](window.event );}
      obj.attachEvent('on'+type, obj[type+fn]);
   } else {
      obj.addEventListener(type,fn,false);
   };
};
addEvent(window,"load",searchfield);
</script>


PS: be careful when editing the code and also upload the files to the correct path!
PS2: someone please test this, I mean if the tutorial is OK because my code is

bye
ping
 
Posts: 23
Joined: Sat May 02, 2009 12:41 am

Re: [TUTORIAL] Search autocomplete

Postby chadon » Mon May 04, 2009 9:45 am

Hi Ping,
I tested your mod but with no success. Nothing happens.
Except for the "Loading..." value the search box code is identical to the original one.
Is there something missing?
chadon
 
Posts: 59
Joined: Mon Jan 19, 2009 10:29 pm
Location: NB Canada

Re: [TUTORIAL] Search autocomplete

Postby ben2paris » Mon May 04, 2009 3:32 pm

Hello,

I "drafted" an autocomplete on my website (http://www.ton-annuaire.fr). The search field doesn't work on Firefox but it works on IE. If you want to try.

It's still under coding and requires lots of changes in Arfooo core to build the index of all words in the directory (I have 5000 sites and 35000 single words...)
ben2paris
 
Posts: 7
Joined: Mon May 04, 2009 3:20 pm
Location: Burgundy, France

Re: [TUTORIAL] Search autocomplete

Postby ping » Mon May 04, 2009 7:12 pm

i think you have typed wrong the data to connect to the mysql DB

also make sure that your table name is arfooo_sites (or whatever_sites)

and also put the right path here to your autocomplete file:
{php}
include ("path/autocomplete.php");
{/php}

btw I tested and it worked
ping
 
Posts: 23
Joined: Sat May 02, 2009 12:41 am

Re: [TUTORIAL] Search autocomplete

Postby ben2paris » Tue May 05, 2009 4:18 am

Hello,

As I said in the French forum, I think this will use lots of Server resources as the php file is called each time you load a page.

I found a way to do this autocomplete in ajax without using too much resources (works on http://www.ton-annuaire.fr).

The problem I have is that I have to customize so much files that I'll not propose a hack but ask Arf to put it on the TO DO list for next version.

How does it work?

I created a table (search) in which I store all the single words in the websites descriptions with the number of occurences of them. Example:

1 sejourner 7
2 au 1229
3 maxime 2
4 est 1289
5 une 1497
6 bien 140
7 ageable 1
8 maniere 13
9 de 11114
10 decouvrir 231
11 auxerre 3
12 cette 131
13 belle 36
14 maison 242
15 caractere 32
16 vous 1756
17 accueille 93
...

Ideally, but not yet coded, the search table would be updated when validating or editing a website.

The search field is linked to a Javascript that posts the keys pressed by the user to a PHP script that queries the database and returns the results in a popup.

Problems

I didn't find how to include accented characters in the search table
The table contains lots of single words (25000 for 5000 sites)

Advantages

PHP script is ran only when a user uses search field.
ben2paris
 
Posts: 7
Joined: Mon May 04, 2009 3:20 pm
Location: Burgundy, France

Re: [TUTORIAL] Search autocomplete

Postby ping » Tue May 05, 2009 3:06 pm

yea you are right, but its more like a concept (i'm using with keywords im the same page, not for the search results)
my future website will use a ajax autocomplete, right now i just dont have the time to make it work but i know that is possible and i think is even more simple from what you say, i remember a script from another directory that only start the autocomplete when the user type the 3th letter (best choise, imo), then he make a custom search base on alphabetical order if that 3 letters so it uses way less queries

my english sucks, dont know if you can understand it :oops:
ping
 
Posts: 23
Joined: Sat May 02, 2009 12:41 am

Re: [TUTORIAL] Search autocomplete

Postby ashlygary74 » Tue Apr 19, 2011 5:52 pm

Autocomplete is a feature provided by many web browsers, e-mail programs, search engine interfaces, source code editors, database query tools, word processors, and command line interpreters. Autocomplete involves the program predicting a word or phrase that the user wants to type in without the user actually typing it in completely.
ashlygary74
 
Posts: 9
Joined: Tue Apr 19, 2011 5:38 pm

Re: [TUTORIAL] Search autocomplete

Postby jassonpounting » Thu Apr 28, 2011 11:39 pm

While the autocomplete function is easily switched off by the user, many people still use this method for storing sensitive information; either because they don't know how to switch it off, or they just don't understand the risks.

As a site owner, you can help protect users from themselves by adding a simple tag to your forms.

For example; a form field such as:

with the addition of auto complete="off" like so:

..will prevent both Firefox and Internet Explorer from caching the information, even if the Auto Complete feature is enabled in the user's browser.

In case you don't know how to switch off auto complete in your own browser:
jassonpounting
 
Posts: 9
Joined: Thu Apr 28, 2011 3:37 pm


Return to Templates, plugins and tutorials

 


  • Related topics
    Replies
    Views
    Last post

Who is online

Users browsing this forum: No registered users and 0 guests

 
Copyright © arfooo.net  2007 - 2010  -  All rights reserved.
Arfooo website group: petites annonces gratuites   voyance en direct - tirage tarot   Consultant en référencement
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group | phpBB SEO
cron