Workshop 1 von X: AutoSuggest

Hallo zusammen,

anbei mal eine ganz einfache AutoSuggest-Funktion. Ich hatte bereits in einem anderen Thread darauf hingewiesen, dass man sich der Quellen im Netz bedienen und dies mit wenigen Handgriffen für Oxid verfügbar machen kann.

Edit: autosuggest.php Bitte URL anpassen

Warum Workshop? Man kann das noch erweitern. Jeder für sich oder hier…:wink:

Grüße

Cutty

PS: Für oxid 4.50 Azure

Nice! Sobald ich zuhause bin versuche ich was beizusteuern:)

Und wenn es nur die Portierung auf 4.4.8 sein sollte…

Viele Grüsse

Netter Ansatz, endlich tut sich was. :slight_smile:

Aber bitte das Framework nutzen bzw. an Sicherheit denken.

Einfach mal nach


unmoeglicherstringwelcherbestimmtnichtvorkommt" or (oxactive=0  ) -- eof

eintippen um nicht aktive Artikel zu sehen.

views/autosuggest.php
suchen:


$getRecord_sql	=	'SELECT * FROM '.$SQL_FROM.' WHERE '.$SQL_WHERE.' LIKE "'.$searchq.'%"'

ersetzen mit:


$getRecord_sql	=	'SELECT * FROM '.$SQL_FROM.' WHERE '.$SQL_WHERE.' LIKE '.oxDb::getDb()->qstr($searchq.'%');

http://phplens.com/adodb/reference.functions.qstr.html

Deswegen steht`s auch hier als “Workshop” und nicht unter “fertige Module” :D.

Ja, klar [B]ichmachmit[/B] aber es gibt immer Leute, die sich einfach alles Mögliche einbauen ohne zu wissen, wie man so was testet…

Kannst Du noch das Zip-File anpassen. Sicherheit geht vor.

Update ist da. Wenn jemand was neues gemacht hat, einfach hochladen. Ich tausche das dann bei Gelegenheit oben aus.

packt das Ding doch zusätzlich in die forge -> http://wiki.oxidforge.org/Projects/Getting_Started

und sobald es ein RC wird kann es ja ins Exchange -> http://www.oxid-esales.com/de/exchange

[QUOTE=MBa;60302]Ja, klar [B]ichmachmit[/B]
[/QUOTE]

Nun die normale Suche erweitert… von da her sollte es problemlos laufen und ähnliches Verhalten haben.

http://projects.oxidforge.org/frs/?group_id=50

Kann man das mit felhertoleranter Suche erweitern?

hmm gibts nen beispiel was da passieren sollte? auf meiner lokalen maschine und entwicklungsumgebung passiert da nix …

Leider nicht. Bei mir sieht das mittlerweile so aus:

Ich habe jetzt mal mit metaphone rumgespielt und das scheint zu gehen, ist aber noch nicht perfect.

hmm teilst du deine version? :slight_smile:

Ahm, das sollte die seinm, die auch oben steht. Da ist jetzt metaphone mit drinne.

Meine neuen Bilder wurden nicht gefunden. Ich war so doof, die Bildaddresse nicht zu ändern. Bitte im Ornder views anpassen, sonst werden die Bilder nicht gefunden oder vom Demoshop des “Verursachers” geladen.

oki dank dir :slight_smile:

Weis einer, wie man metaphone richtig einsetzt???

Man könnte das vereinfacht so machen (s. Anhang ).

Bitte die Bildadresse anpassen (autosuggest.php)

Die Funktionen setfocus und offsetfocus habe ich vergessen. Wer die nicht braucht, raus damit. Wenn doch. am besten in die oxid.js reinschreiben:

function setFocus() {
		document.getElementById("searchparam").focus();
      }
	  function offsetFocus() {
		document.getElementById("searchparam").blur();
      }

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

Schön, das wird ja. Vielleicht sollte man noch den Bildabruf vereinfachen:

$sShopURL = oxConfig::getInstance()->getConfigParam( 'sShopURL' );
<img src="'.$sShopURL.'out/pictures/0/'. $row['OXTHUMB'] . '" width="40" height="40" />