PHPFOX Autocomplete Search Box.

I have searched a lot for an Autocomplete searchbox for phpfox. I didn't findout any. so i have modified the script of Nodstrum and developed this as a Phpfox friendly one. Please go through this.

JavaScript required was : jquery-1.2.1.pack.js Most probably Phpfox will have this js by default.

Here we can make a search for users from the phpfox user table. (This is only an example).

HTML

MODULE => MODULE NAME => TEMPLATE => DEFAULT => CONTROLLER => FILE NAME.html.php

<?php

/**

* Created by Arun George <arun@arun-g.in>

*/

defined('PHPFOX') or exit('NO DICE!');

?>

<form method="post" name="searchuser" action="" >
<label>User :</label>
<input type="text" size="30" name="val[username]" autocomplete="off"  value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
<input type="hidden" size="30" name="val[user]" value="" id="inputStrings" />
<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList">
&nbsp;
</div>
</div>
<p> <input type="submit" class="" value="Submit"  name=""> </p>
</form>

CLASS FILE

MODULE => MODULE NAME => INCLUDE => COMPONENT => CONTROLLER => FILE NAME.class.php

<?php

/**

* Created by Arun George <arun@arun-g.in>

*/

defined('PHPFOX') or exit('NO DICE!');

class MODULENAME_Component_Controller_FILENAME extends Phpfox_Component{
public function process(){
$this->template()->setBreadCrumb('FILE NAME', $this->url()->makeUrl('MODULENAME.FILENAME'), true);
$this->template()->setHeader(array(
'JSFILE.js'   => 'MODULENAME',
'CSSFILE.css' => 'MODULENAME'
))
      ->setTitle('PAGE TITLE');
}
}

?>

Java Script

MODULE => MODULE NAME => STATIC => JSCRIPT => JSFILE.js

function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.ajaxCall('MODULE.autocompleteuser' , 'queryString=' + inputString);
}
} // lookup

function fill(thisValue) {
$('#inputString').val(thisValue);
setTimeout("$('#suggestions').hide();", 200);
}

function add(Valuead) {
$('#inputStrings').val(Valuead);
setTimeout("$('#suggestions').hide();", 200);
}

Cascading Style Sheets

MODULE => MODULE NAME => STATIC => CSS => DEFAULT => DEFAULT => CSSFILE.css

.suggestionsBox {
width:114px;
padding:0;
left: 159px;
margin: 1px 0 0;
position: relative;
background-color: #F4f4f4;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 1px solid #CCCCCC;
color: #000000;
}

.suggestionList {
margin: 0px;
padding: 0px;
}

.suggestionList p {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
font-size: 12px;
}

.suggestionList li:hover {
background-color: #659CD8;
}

#suggestions .suggestionList p {  
margin: 0;
padding: 5px 6px;
}

#suggestions .suggestionList p:hover {
background: #EEECE1;
}

AJAX ACTION

MODULE => MODULE NAME => INCLUDE => COMPONENT => AJAX => ajax.class.php

<?php

/**

* Created by Arun George <arun@arun-g.in>

*/

defined('PHPFOX') or exit('NO DICE!');

class MODULENAME_Component_Ajax_Ajax extends Phpfox_Ajax{
public function __construct(){    
        $this->user = Phpfox::getT('user');
    }
public function autocompleteuser(){
$queryString = $this->get('queryString');
$result = mysql_query("SELECT user_id, full_name FROM " . $this->user . " WHERE full_name LIKE '$queryString%' LIMIT 10");
$title = mysql_result($result);
// here you can use functions which is written in service class of any modules in Phpfox. Above mentioned is not the right way.

$this->show('.suggestionsBox');
while($row = mysql_fetch_array($result)){
$full_name = $row['full_name'];
$user_id = $row['user_id'];
$html .= '<p onClick="fill(\''.$full_name.'\');add(\''.$user_id.'\')">'.$full_name.'</p>';
}
$this->html('#autoSuggestionsList', $html);
}
}

?>

You have successfully implemented the Autocomplete searchbox in PHPFOX .