Hi zusammen,
habs mal gerade nach JQuery umgebaut.
Im search Template das bisherige JavaScript ersetzen mit:
<script type="text/javascript">
function autoSuggest() {
var q = jQuery.trim($('#searchparam').val());
var noCache = Math.random();
if (q.length >= startSuggest)
{
$("#results").hide();
$.ajax({
url: '[{ $oViewConf->getSelfLink() }]cl=autosuggest&q=' + q + '&nocache=' + noCache,
dataType: "html",
type: "get",
success: function(data){
if(data) {
$("#results").html(" ");
$("#results").html(data);
$('#results').show();
}
}
});
} else {
$('#results').hide();
}
}
</script>
Das Inputfeld entsprechend ändern in:
<input type="text" name="searchparam" value="Suchbegriff eingeben" size="20" id="searchparam" class="text" autocomplete="off">
Und natürlich das ganze noch in einer init.js oder ähnliches initialisieren:
$(document).ready(function()
{
var IE = /*@cc_on!@*/false;
/* init events in content */
var thisParent = thisParent || $("body");
if(IE == false);
initEvents(thisParent);
});
// start after user input >= 3 chars
var startSuggest = 3;
/* Init basic events and effects */
function initEvents(thisParent)
{
initAutoSuggest();
}
function initAutoSuggest()
{
$('#searchparam').bind('keyup', function() { autoSuggest(); } );
$('#searchparam').focus(function() { $('#searchparam').val(" "); } );
$('#searchparam').blur(function() { $('#searchparam').val("Suchbegriff eingeben"); } );
$('body').click(function() { $('#results').slideUp(); } );
}
Die geänderte autosuggest.php für ausschließlich Vaterartikel:
<?php
/* AUTOSUGGEST FOR OXID 1.1 //
Released under the GNU General Public License
*/
class autosuggest extends oxubase
{
public function render()
{
$SQL_FROM = 'oxarticles';
$SQL_WHERE = 'oxtitle';
$searchq = strip_tags($_GET['q']);
$dbx = oxDb::getDb()->qstr(''.$searchq.'');
$getRecord_sql = "SELECT * FROM " . $SQL_FROM . " WHERE oxparentid = '' AND oxactive = '1' AND " . $SQL_WHERE ." LIKE " . oxDb::getDb()->qstr('%'.$searchq.'%') . " LIMIT 0 , 27";
mysql_query( "SET NAMES 'utf8'" ); // Umlaute ausgeben
$getRecord = mysql_query($getRecord_sql);
$num_rows1 = mysql_num_rows($getRecord);
if ($num_rows1 == 0) {
$where_str = " AND ( soundex_match(".$dbx.", oxtitle, ' ') = '1' ) LIMIT 0 , 27";
$getRecord_sql = "select * FROM " . $SQL_FROM . " WHERE " .$where_str;
$getRecord = mysql_query($getRecord_sql);
$num_rows2 = mysql_num_rows($getRecord);
}
if ($num_rows1 == 0 && $num_rows2 == 0) {
$where_str = " AND ( koelner_match(".$dbx.", oxtitle, ' ') = '1' ) LIMIT 0 , 27";
$getRecord_sql = "select * FROM " . $SQL_FROM . " WHERE " .$where_str;
$getRecord = mysql_query($getRecord_sql);
$num_rows3 = mysql_num_rows($getRecord);
}
if ($num_rows1 == 0 && $num_rows2 == 0 && $num_rows3 == 0) {
exit;
}
if(strlen($searchq)>0){
parent::render();
$oCurr = oxConfig::getInstance()->getActShopCurrencyObject();
echo "<table><tr><td colspan=\"3\"> </td></tr>";
while ($row = mysql_fetch_array($getRecord)) {
$query = "select oxseourl FROM oxseo WHERE oxobjectid = '" . $row['OXID'] . "' AND oxlang = 0";
$result = mysql_query($query);
while($line1 = mysql_fetch_array($result))
{
$seourl = $line1['oxseourl'] ;
}
$picname = str_replace(".jpg", "", trim(utf8_encode($row['OXPIC1'])));
?>
<tr><td class="title"><?php echo '<a class="picture" href="/' .$seourl .'">' . $row['OXTITLE']. '</a>'; ?></td><td class="price"><?php echo number_format($row['OXPRICE'], 2, ",", "").' '.$oCurr->sign; ?></td> <td class="image"><?php echo '<a href="' .$seourl .'"><img src="http://www.meinestruempfe.de/out/pictures/1/' . $picname . '_ico.jpg" alt="' . $row['OXTITLE'] . '">'; ?></td></tr>
<?php }
echo "</table>";
exit; // Header-Fehler vermeiden
} else {
exit;
}
}
}
?>
Hier noch das CSS:
/* ---------------------------- */
/* CUSTOMIZE AUTOSUGGEST STYLE */
#results{background: #373A3F; width: 303px; position:absolute; z-index:99; left:661px; top: 148px; padding:0 8px 0 8px; display:none;}
#results table {width: 100%;}
#results th { font-weight:bold; text-align:center;}
#results tr {border-top: 1px solid #000;}
#results tr:first-child{ border: none; }
#results tr:hover{}
#results td.image {width:40px; height: 42px; text-align: center; padding: 5px; }
#results td.price {color: #fff; width:60px; padding:10px; margin:0; text-align: center;}
#results td a{display:block; text-decoration:none; color:#fff;}
#results td a:hover{text-decoration: underline;}
#results td a small{display:block; text-decoration:none; color:#fff; font-weight:normal;}
Allerbeste Grüße vom Chris