2
You could use Firebug for debugging. I made something similar for debaser, with a jquery script called autocomplete. Works similar to Google Suggest.
Template:
<form name="ajaxsearcher" id="ajaxsearcher" action="javascript:void(null);" method="post">
<div id="debsearchdiv">
<span class="debsearchword"><{$smarty.const._MD_DEBASER_SEARCH}></span><input type="text" id="ajaxsearch" /> <img src="<{$smarty.const.DEBASER_IMG}>/dialog-ok.png" name="debsearchsubmit" style="float:left" id="debsearchsubmit" alt="<{$smarty.const._SUBMIT}>" title="<{$smarty.const._SUBMIT}>" />
</div>
</form>
<div id="searchresponse"></div>
<script type="text/javascript" src="<{$xoops_url}>/modules/debaser/js/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="<{$xoops_url}>/modules/debaser/js/jquery.ajaxQueue.js"></script>
<script type="text/javascript" src="<{$xoops_url}>/modules/debaser/js/jquery.autocomplete.pack.js"></script>
<script type="text/javascript">
$().ready(function() {
$("ajaxsearcher").attr({ autocomplete:"off" });
function formatItem(row) {
return row[0] + " (<strong>id: " + row[1] + "</strong>)";
}
function formatResult(row) {
return row[0].replace(/(<.+?>)/gi, '');
}
$("#ajaxsearch").autocomplete("debasersearch.php", {
width: 260,
selectFirst: false
});
$("#debsearchsubmit").click(function () {
$("#searchresponse").load("<{$xoops_url}>/modules/debaser/ajaxed.php", { action : "ajaxsearch", searchitem1 : document.getElementById('ajaxsearch').value });
});
});
</script>
debaser_search.php:
<?php
include 'header.php';
if (isset($_GET['q']) && $_GET['q'] != '') {
$getquery = addSlashes($_GET['q']);
$getlimit = intval($_GET['limit']);
$result = $xoopsDB->query("SELECT artist, title, genreid FROM ".$xoopsDB->prefix('debaser_files')." WHERE title LIKE '%$getquery%' OR artist LIKE '%$getquery%' OR album LIKE '%$getquery%' OR year LIKE '%$getquery%' OR year LIKE '%$getquery%' OR length LIKE '%$getquery%' OR frequence LIKE '%$getquery%' OR bitrate LIKE '%$getquery%' LIMIT $getlimit");
while(list($artist, $title, $genreid) = $xoopsDB->fetchRow($result)) {
if ($gperm_handler->checkRight('DebaserCatPerm', $genreid, $groups, $module_id)) echo $artist." "."$titlen";
}
}
?>
ajaxed.php:
<?php
if (isset($_POST['action']) && $_POST['action'] == 'ajaxsearch') {
// check the values
$searchitem1 = isset($_POST['searchitem1']) ? addSlashes($_POST['searchitem1']) : '';
$result = $xoopsDB->query("SELECT xfid, artist, title FROM ".$xoopsDB->prefix('debaser_files')." WHERE CONCAT_WS(' ', artist, title) LIKE '$searchitem1' OR artist LIKE '%$searchitem1%' OR title LIKE '%$searchitem1%'");
$returnresult = '<br /><div id="debsearchresults"><h1>'._MD_DEBASER_SEARCHRES.'</h1>';
while(list($getback, $getback2, $getback3) = $xoopsDB->fetchRow($result)) {
$returnresult .= '<span style="line-height:150%"<a href="'.DEBASER_URL.'/singlefile.php?id='.$getback.'">'.$getback2.' '.$getback3.'<br /></span>';
}
$returnresult .= '</div>';
echo $returnresult;
}
?>
CSS:
/* autocomplete css */
.ac_results {
padding: 0px;
border: 1px solid black;
background-color: white;
overflow: hidden;
z-index: 99999
}
.ac_results ul {
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0
}
.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;
font: menu;
font-size: 12px;
line-height: 16px;
overflow: hidden
}
.ac_loading {
background: white url('../images/indicator.gif') right center no-repeat
}
.ac_odd {
background-color: #eee
}
.ac_over {
background-color: #231f20;
color: white
}
div#debsearchdiv {
padding: 2px;
background-color: #231f20;
color: #fff;
font-size: 12px;
height:24px
}
input#ajaxsearch {
height: 19px;
font-size: 12px;
width: 251px;
padding-top: 4px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 0px;
margin: 0px;
float: left;
border: none;
}
.debsearchword {
float:left;
padding-right:5px;
padding-top:5px;
padding-left:5px;
font-weight:bold
}
div#debsearchresults {
padding: 10px;
background-color: #231f20;
font-size: 12px
}
div#debsearchresults a {
color: silver;
}
div#debsearchresults a:hover {
text-decoration: underline
}
div#debsearchresults h1 {
font-size: 18px;
font-weight: bold;
color: #fff;
margin-top: 0px
}
edit: this code might not work, because the textsanitizer killed backslashes used at some places, but I hope it shows you the way.
