CONTENIDO Forum

Das Diskussionsforum zum Open Source Content Management System
https://forum.contenido.org/

Ajax-Autosuggest für Suche

https://forum.contenido.org/viewtopic.php?f=105&t=23713

Seite 1 von 1

Ajax-Autosuggest für Suche

Verfasst: Mi 29. Apr 2009, 19:56
von derSteffen
Hallo liebe Community.

ich habe folgende Seite gefunden http://www.brandspankingnew.net/special ... plete.html und möchte dies gerne in Contenido relaisieren.

Funktion: In der Suchbox gibt der Besucher seine Suchwort ein und Contenido durchsucht die Seite und schlägt Seite vor in dem das Wort vorkommt.

Dazu benötigt man folgende Dateien:

Die html-Datei:

Code: Alles auswählen

<html>
<head>
<title>Ajax auto-suggest / auto-complete | BrandSpankingNew</title>
<script type="text/javascript" src="js/script.js" charset="utf-8"></script>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" charset="utf-8" />
</head>
<body>
<form method="get" action="" class="asholder">
	<small style="float:right">Hidden ID Field: <input type="text" id="testid" value="" style="font-size: 10px; width: 20px;" disabled="disabled" /></small>
	<label for="testinput">Person</label>
	<input style="width: 200px" type="text" id="testinput" value="" /> 
	<input type="submit" value="submit" />
</form>

<form method="get" action="" class="asholder">
	<label for="testinput_xml">Person</label>
	<input type="text" id="testinput_xml" value="" style="width:300px" /> 
	<br /><br /><input type="submit" value="submit" />
</form>

<script type="text/javascript">
	var options = {
		script:"test.php?json=true&limit=6&",
		varname:"input",
		json:true,
		shownoresults:false,
		maxresults:6,
		callback: function (obj) { document.getElementById('testid').value = obj.id; }
	};
	var as_json = new bsn.AutoSuggest('testinput', options);
	
	
	var options_xml = {
		script: function (input) { return "test.php?input="+input+"&testid="+document.getElementById('testid').value; },
		varname:"input"
	};
	var as_xml = new bsn.AutoSuggest('testinput_xml', options_xml);
</script>
</body>
Die CSS-Datei:

Code: Alles auswählen

/* 
================================================
autosuggest, inquisitor style
================================================
*/



div.autosuggest
{
  position:absolute;
	background-image: url(img_inquisitor/as_pointer.gif);
	background-position: top;
	background-repeat: no-repeat;
	padding: 10px 0 0 0;
	z-index:100000;


}

div.autosuggest div.as_header,
div.autosuggest div.as_footer
{
	position: relative;
	height: 6px;
	padding: 0 6px;
	background-image: url(img_inquisitor/ul_corner_tr.gif);
	background-position: top right;
	background-repeat: no-repeat;
	overflow: hidden;
}
div.autosuggest div.as_footer
{
	background-image: url(img_inquisitor/ul_corner_br.gif);
}

div.autosuggest div.as_header div.as_corner,
div.autosuggest div.as_footer div.as_corner
{
	position: absolute;
	top: 0;
	left: 0;
	height: 6px;
	width: 6px;
	background-image: url(img_inquisitor/ul_corner_tl.gif);
	background-position: top left;
	background-repeat: no-repeat;
}
div.autosuggest div.as_footer div.as_corner
{
	background-image: url(img_inquisitor/ul_corner_bl.gif);
}
div.autosuggest div.as_header div.as_bar,
div.autosuggest div.as_footer div.as_bar
{
	height: 6px;
	overflow: hidden;
	background-color: #333;
}


div.autosuggest ul
{
	list-style: none;
	margin: 0 0 -4px 0;
	padding: 0;
	overflow: hidden;
	background-color: #333;	
}

div.autosuggest ul li
{
	color: #ccc;
	padding: 0;
	margin: 0 4px 4px;
	text-align: left;
}

div.autosuggest ul li a
{
	color: #ccc;
	display: block;
	text-decoration: none;
	background-color: transparent;
	text-shadow: #000 0px 0px 5px;
	position: relative;
	padding: 0;
	width: 100%;
}
div.autosuggest ul li a:hover
{
	background-color: #444;
}
div.autosuggest ul li.as_highlight a:hover
{
	background-color: #1B5CCD;
}

div.autosuggest ul li a span
{
	display: block;
	padding: 3px 6px;
	font-weight: bold;
}

div.autosuggest ul li a span small
{
	font-weight: normal;
	color: #999;
}

div.autosuggest ul li.as_highlight a span small
{
	color: #ccc;
}

div.autosuggest ul li.as_highlight a
{
	color: #fff;
	background-color: #1B5CCD;
	background-image: url(img_inquisitor/hl_corner_br.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
}

div.autosuggest ul li.as_highlight a span
{
	background-image: url(img_inquisitor/hl_corner_bl.gif);
	background-position: bottom left;
	background-repeat: no-repeat;
}

div.autosuggest ul li a .tl,
div.autosuggest ul li a .tr
{
	background-image: transparent;
	background-repeat: no-repeat;
	width: 6px;
	height: 6px;
	position: absolute;
	top: 0;
	padding: 0;
	margin: 0;
}
div.autosuggest ul li a .tr
{
	right: 0;
}

div.autosuggest ul li.as_highlight a .tl
{
	left: 0;
	background-image: url(img_inquisitor/hl_corner_tl.gif);
	background-position: bottom left;
}

div.autosuggest ul li.as_highlight a .tr
{
	right: 0;
	background-image: url(img_inquisitor/hl_corner_tr.gif);
	background-position: bottom right;
}



div.autosuggest ul li.as_warning
{
	font-weight: bold;
	text-align: center;
}

div.autosuggest ul em
{
	font-style: normal;
	color: #6EADE7;
}
Die JS-Datei:

Code: Alles auswählen

/**
 *  author:		Timothy Groves - http://www.brandspankingnew.net
 *	version:	1.2 - 2006-11-17
 *              1.3 - 2006-12-04
 *              2.0 - 2007-02-07
 *              2.1.1 - 2007-04-13
 *              2.1.2 - 2007-07-07
 *              2.1.3 - 2007-07-19
 *
 */


if (typeof(bsn) == "undefined")
	_b = bsn = {};


if (typeof(_b.Autosuggest) == "undefined")
	_b.Autosuggest = {};
else
	alert("Autosuggest is already set!");












_b.AutoSuggest = function (id, param)
{
	// no DOM - give up!
	//
	if (!document.getElementById)
		return 0;
	
	
	
	
	// get field via DOM
	//
	this.fld = _b.DOM.gE(id);

	if (!this.fld)
		return 0;
	
	
	
	
	// init variables
	//
	this.sInp 	= "";
	this.nInpC 	= 0;
	this.aSug 	= [];
	this.iHigh 	= 0;
	
	
	
	
	// parameters object
	//
	this.oP = param ? param : {};
	
	// defaults	
	//
	var k, def = {minchars:1, meth:"get", varname:"input", className:"autosuggest", timeout:2500, delay:500, offsety:-5, shownoresults: true, noresults: "No results!", maxheight: 250, cache: true, maxentries: 25};
	for (k in def)
	{
		if (typeof(this.oP[k]) != typeof(def[k]))
			this.oP[k] = def[k];
	}
	
	
	// set keyup handler for field
	// and prevent autocomplete from client
	//
	var p = this;
	
	// NOTE: not using addEventListener because UpArrow fired twice in Safari
	//_b.DOM.addEvent( this.fld, 'keyup', function(ev){ return pointer.onKeyPress(ev); } );
	
	this.fld.onkeypress 	= function(ev){ return p.onKeyPress(ev); };
	this.fld.onkeyup 		= function(ev){ return p.onKeyUp(ev); };
	
	this.fld.setAttribute("autocomplete","off");
};
















_b.AutoSuggest.prototype.onKeyPress = function(ev)
{
	
	var key = (window.event) ? window.event.keyCode : ev.keyCode;



	// set responses to keydown events in the field
	// this allows the user to use the arrow keys to scroll through the results
	// ESCAPE clears the list
	// TAB sets the current highlighted value
	//
	var RETURN = 13;
	var TAB = 9;
	var ESC = 27;
	
	var bubble = 1;

	switch(key)
	{
		case RETURN:
			this.setHighlightedValue();
			bubble = 0;
			break;

		case ESC:
			this.clearSuggestions();
			break;
	}

	return bubble;
};



_b.AutoSuggest.prototype.onKeyUp = function(ev)
{
	var key = (window.event) ? window.event.keyCode : ev.keyCode;
	


	// set responses to keydown events in the field
	// this allows the user to use the arrow keys to scroll through the results
	// ESCAPE clears the list
	// TAB sets the current highlighted value
	//

	var ARRUP = 38;
	var ARRDN = 40;
	
	var bubble = 1;

	switch(key)
	{


		case ARRUP:
			this.changeHighlight(key);
			bubble = 0;
			break;


		case ARRDN:
			this.changeHighlight(key);
			bubble = 0;
			break;
		
		
		default:
			this.getSuggestions(this.fld.value);
	}

	return bubble;
	

};








_b.AutoSuggest.prototype.getSuggestions = function (val)
{
	
	// if input stays the same, do nothing
	//
	if (val == this.sInp)
		return 0;
	
	
	// kill list
	//
	_b.DOM.remE(this.idAs);
	
	
	this.sInp = val;
	
	
	// input length is less than the min required to trigger a request
	// do nothing
	//
	if (val.length < this.oP.minchars)
	{
		this.aSug = [];
		this.nInpC = val.length;
		return 0;
	}
	
	
	
	
	var ol = this.nInpC; // old length
	this.nInpC = val.length ? val.length : 0;
	
	
	
	// if caching enabled, and user is typing (ie. length of input is increasing)
	// filter results out of aSuggestions from last request
	//
	var l = this.aSug.length;
	if (this.nInpC > ol && l && l<this.oP.maxentries && this.oP.cache)
	{
		var arr = [];
		for (var i=0;i<l;i++)
		{
			if (this.aSug[i].value.substr(0,val.length).toLowerCase() == val.toLowerCase())
				arr.push( this.aSug[i] );
		}
		this.aSug = arr;
		
		this.createList(this.aSug);
		
		
		
		return false;
	}
	else
	// do new request
	//
	{
		var pointer = this;
		var input = this.sInp;
		clearTimeout(this.ajID);
		this.ajID = setTimeout( function() { pointer.doAjaxRequest(input) }, this.oP.delay );
	}

	return false;
};





_b.AutoSuggest.prototype.doAjaxRequest = function (input)
{
	// check that saved input is still the value of the field
	//
	if (input != this.fld.value)
		return false;
	
	
	var pointer = this;
	
	
	// create ajax request
	//
	if (typeof(this.oP.script) == "function")
		var url = this.oP.script(encodeURIComponent(this.sInp));
	else
		var url = this.oP.script+this.oP.varname+"="+encodeURIComponent(this.sInp);
	
	if (!url)
		return false;
	
	var meth = this.oP.meth;
	var input = this.sInp;
	
	var onSuccessFunc = function (req) { pointer.setSuggestions(req, input) };
	var onErrorFunc = function (status) { alert("AJAX error: "+status); };

	var myAjax = new _b.Ajax();
	myAjax.makeRequest( url, meth, onSuccessFunc, onErrorFunc );
};





_b.AutoSuggest.prototype.setSuggestions = function (req, input)
{
	// if field input no longer matches what was passed to the request
	// don't show the suggestions
	//
	if (input != this.fld.value)
		return false;
	
	
	this.aSug = [];
	
	
	if (this.oP.json)
	{
		var jsondata = eval('(' + req.responseText + ')');
		
		for (var i=0;i<jsondata.results.length;i++)
		{
			this.aSug.push(  { 'id':jsondata.results[i].id, 'value':jsondata.results[i].value, 'info':jsondata.results[i].info }  );
		}
	}
	else
	{

		var xml = req.responseXML;
	
		// traverse xml
		//
		var results = xml.getElementsByTagName('results')[0].childNodes;

		for (var i=0;i<results.length;i++)
		{
			if (results[i].hasChildNodes())
				this.aSug.push(  { 'id':results[i].getAttribute('id'), 'value':results[i].childNodes[0].nodeValue, 'info':results[i].getAttribute('info') }  );
		}
	
	}
	
	this.idAs = "as_"+this.fld.id;
	

	this.createList(this.aSug);

};














_b.AutoSuggest.prototype.createList = function(arr)
{
	var pointer = this;
	
	
	
	
	// get rid of old list
	// and clear the list removal timeout
	//
	_b.DOM.remE(this.idAs);
	this.killTimeout();
	
	
	// if no results, and shownoresults is false, do nothing
	//
	if (arr.length == 0 && !this.oP.shownoresults)
		return false;
	
	
	// create holding div
	//
	var div = _b.DOM.cE("div", {id:this.idAs, className:this.oP.className});	
	
	var hcorner = _b.DOM.cE("div", {className:"as_corner"});
	var hbar = _b.DOM.cE("div", {className:"as_bar"});
	var header = _b.DOM.cE("div", {className:"as_header"});
	header.appendChild(hcorner);
	header.appendChild(hbar);
	div.appendChild(header);
	
	
	
	
	// create and populate ul
	//
	var ul = _b.DOM.cE("ul", {id:"as_ul"});
	
	
	
	
	// loop throught arr of suggestions
	// creating an LI element for each suggestion
	//
	for (var i=0;i<arr.length;i++)
	{
		// format output with the input enclosed in a EM element
		// (as HTML, not DOM)
		//
		var val = arr[i].value;
		var st = val.toLowerCase().indexOf( this.sInp.toLowerCase() );
		var output = val.substring(0,st) + "<em>" + val.substring(st, st+this.sInp.length) + "</em>" + val.substring(st+this.sInp.length);
		
		
		var span 		= _b.DOM.cE("span", {}, output, true);
		if (arr[i].info != "")
		{
			var br			= _b.DOM.cE("br", {});
			span.appendChild(br);
			var small		= _b.DOM.cE("small", {}, arr[i].info);
			span.appendChild(small);
		}
		
		var a 			= _b.DOM.cE("a", { href:"#" });
		
		var tl 		= _b.DOM.cE("span", {className:"tl"}, " ");
		var tr 		= _b.DOM.cE("span", {className:"tr"}, " ");
		a.appendChild(tl);
		a.appendChild(tr);
		
		a.appendChild(span);
		
		a.name = i+1;
		a.onclick = function () { pointer.setHighlightedValue(); return false; };
		a.onmouseover = function () { pointer.setHighlight(this.name); };
		
		var li = _b.DOM.cE(  "li", {}, a  );
		
		ul.appendChild( li );
	}
	
	
	// no results
	//
	if (arr.length == 0 && this.oP.shownoresults)
	{
		var li = _b.DOM.cE(  "li", {className:"as_warning"}, this.oP.noresults  );
		ul.appendChild( li );
	}
	
	
	div.appendChild( ul );
	
	
	var fcorner = _b.DOM.cE("div", {className:"as_corner"});
	var fbar = _b.DOM.cE("div", {className:"as_bar"});
	var footer = _b.DOM.cE("div", {className:"as_footer"});
	footer.appendChild(fcorner);
	footer.appendChild(fbar);
	div.appendChild(footer);
	
	
	
	// get position of target textfield
	// position holding div below it
	// set width of holding div to width of field
	//
	var pos = _b.DOM.getPos(this.fld);
	
	div.style.left 		= pos.x + "px";
	div.style.top 		= ( pos.y + this.fld.offsetHeight + this.oP.offsety ) + "px";
	div.style.width 	= this.fld.offsetWidth + "px";
	
	
	
	// set mouseover functions for div
	// when mouse pointer leaves div, set a timeout to remove the list after an interval
	// when mouse enters div, kill the timeout so the list won't be removed
	//
	div.onmouseover 	= function(){ pointer.killTimeout() };
	div.onmouseout 		= function(){ pointer.resetTimeout() };


	// add DIV to document
	//
	document.getElementsByTagName("body")[0].appendChild(div);
	
	
	
	// currently no item is highlighted
	//
	this.iHigh = 0;
	
	
	
	
	
	
	// remove list after an interval
	//
	var pointer = this;
	this.toID = setTimeout(function () { pointer.clearSuggestions() }, this.oP.timeout);
};















_b.AutoSuggest.prototype.changeHighlight = function(key)
{	
	var list = _b.DOM.gE("as_ul");
	if (!list)
		return false;
	
	var n;

	if (key == 40)
		n = this.iHigh + 1;
	else if (key == 38)
		n = this.iHigh - 1;
	
	
	if (n > list.childNodes.length)
		n = list.childNodes.length;
	if (n < 1)
		n = 1;
	
	
	this.setHighlight(n);
};



_b.AutoSuggest.prototype.setHighlight = function(n)
{
	var list = _b.DOM.gE("as_ul");
	if (!list)
		return false;
	
	if (this.iHigh > 0)
		this.clearHighlight();
	
	this.iHigh = Number(n);
	
	list.childNodes[this.iHigh-1].className = "as_highlight";


	this.killTimeout();
};


_b.AutoSuggest.prototype.clearHighlight = function()
{
	var list = _b.DOM.gE("as_ul");
	if (!list)
		return false;
	
	if (this.iHigh > 0)
	{
		list.childNodes[this.iHigh-1].className = "";
		this.iHigh = 0;
	}
};


_b.AutoSuggest.prototype.setHighlightedValue = function ()
{
	if (this.iHigh)
	{
		this.sInp = this.fld.value = this.aSug[ this.iHigh-1 ].value;
		
		// move cursor to end of input (safari)
		//
		this.fld.focus();
		if (this.fld.selectionStart)
			this.fld.setSelectionRange(this.sInp.length, this.sInp.length);
		

		this.clearSuggestions();
		
		// pass selected object to callback function, if exists
		//
		if (typeof(this.oP.callback) == "function")
			this.oP.callback( this.aSug[this.iHigh-1] );
	}
};













_b.AutoSuggest.prototype.killTimeout = function()
{
	clearTimeout(this.toID);
};

_b.AutoSuggest.prototype.resetTimeout = function()
{
	clearTimeout(this.toID);
	var pointer = this;
	this.toID = setTimeout(function () { pointer.clearSuggestions() }, 1000);
};







_b.AutoSuggest.prototype.clearSuggestions = function ()
{
	
	this.killTimeout();
	
	var ele = _b.DOM.gE(this.idAs);
	var pointer = this;
	if (ele)
	{
		var fade = new _b.Fader(ele,1,0,250,function () { _b.DOM.remE(pointer.idAs) });
	}
};










// AJAX PROTOTYPE _____________________________________________


if (typeof(_b.Ajax) == "undefined")
	_b.Ajax = {};



_b.Ajax = function ()
{
	this.req = {};
	this.isIE = false;
};



_b.Ajax.prototype.makeRequest = function (url, meth, onComp, onErr)
{
	
	if (meth != "POST")
		meth = "GET";
	
	this.onComplete = onComp;
	this.onError = onErr;
	
	var pointer = this;
	
	// branch for native XMLHttpRequest object
	if (window.XMLHttpRequest)
	{
		this.req = new XMLHttpRequest();
		this.req.onreadystatechange = function () { pointer.processReqChange() };
		this.req.open("GET", url, true); //
		this.req.send(null);
	// branch for IE/Windows ActiveX version
	}
	else if (window.ActiveXObject)
	{
		this.req = new ActiveXObject("Microsoft.XMLHTTP");
		if (this.req)
		{
			this.req.onreadystatechange = function () { pointer.processReqChange() };
			this.req.open(meth, url, true);
			this.req.send();
		}
	}
};


_b.Ajax.prototype.processReqChange = function()
{
	
	// only if req shows "loaded"
	if (this.req.readyState == 4) {
		// only if "OK"
		if (this.req.status == 200)
		{
			this.onComplete( this.req );
		} else {
			this.onError( this.req.status );
		}
	}
};










// DOM PROTOTYPE _____________________________________________


if (typeof(_b.DOM) == "undefined")
	_b.DOM = {};



/* create element */
_b.DOM.cE = function ( type, attr, cont, html )
{
	var ne = document.createElement( type );
	if (!ne)
		return 0;
		
	for (var a in attr)
		ne[a] = attr[a];
	
	var t = typeof(cont);
	
	if (t == "string" && !html)
		ne.appendChild( document.createTextNode(cont) );
	else if (t == "string" && html)
		ne.innerHTML = cont;
	else if (t == "object")
		ne.appendChild( cont );

	return ne;
};



/* get element */
_b.DOM.gE = function ( e )
{
	var t=typeof(e);
	if (t == "undefined")
		return 0;
	else if (t == "string")
	{
		var re = document.getElementById( e );
		if (!re)
			return 0;
		else if (typeof(re.appendChild) != "undefined" )
			return re;
		else
			return 0;
	}
	else if (typeof(e.appendChild) != "undefined")
		return e;
	else
		return 0;
};



/* remove element */
_b.DOM.remE = function ( ele )
{
	var e = this.gE(ele);
	
	if (!e)
		return 0;
	else if (e.parentNode.removeChild(e))
		return true;
	else
		return 0;
};



/* get position */
_b.DOM.getPos = function ( e )
{
	var e = this.gE(e);

	var obj = e;

	var curleft = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curleft += obj.offsetLeft;
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
		curleft += obj.x;
	
	var obj = e;
	
	var curtop = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curtop += obj.offsetTop;
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
		curtop += obj.y;

	return {x:curleft, y:curtop};
};










// FADER PROTOTYPE _____________________________________________



if (typeof(_b.Fader) == "undefined")
	_b.Fader = {};





_b.Fader = function (ele, from, to, fadetime, callback)
{	
	if (!ele)
		return 0;
	
	this.e = ele;
	
	this.from = from;
	this.to = to;
	
	this.cb = callback;
	
	this.nDur = fadetime;
		
	this.nInt = 50;
	this.nTime = 0;
	
	var p = this;
	this.nID = setInterval(function() { p._fade() }, this.nInt);
};




_b.Fader.prototype._fade = function()
{
	this.nTime += this.nInt;
	
	var ieop = Math.round( this._tween(this.nTime, this.from, this.to, this.nDur) * 100 );
	var op = ieop / 100;
	
	if (this.e.filters) // internet explorer
	{
		try
		{
			this.e.filters.item("DXImageTransform.Microsoft.Alpha").opacity = ieop;
		} catch (e) { 
			// If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
			this.e.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity='+ieop+')';
		}
	}
	else // other browsers
	{
		this.e.style.opacity = op;
	}
	
	
	if (this.nTime == this.nDur)
	{
		clearInterval( this.nID );
		if (this.cb != undefined)
			this.cb();
	}
};



_b.Fader.prototype._tween = function(t,b,c,d)
{
	return b + ( (c-b) * (t/d) );
};
Die Datei zum Testen

Code: Alles auswählen

<?php

/*
note:
this is just a static test version using a hard-coded countries array.
normally you would be populating the array out of a database

the returned xml has the following structure
<results>
	<rs>foo</rs>
	<rs>bar</rs>
</results>
*/

	$aUsers = array(
		"Ädams, Egbert",
		"Altman, Alisha",
		"Archibald, Janna",
		"Auman, Cody",
		"Bagley, Sheree",
		"Ballou, Wilmot",
		"Bard, Cassian",
		"Bash, Latanya",
		"Beail, May",
		"Black, Lux",
		"Bloise, India",
		"Blyant, Nora",
		"Bollinger, Carter",
		"Burns, Jaycob",
		"Carden, Preston",
		"Carter, Merrilyn",
		"Christner, Addie",
		"Churchill, Mirabelle",
		"Conkle, Erin",
		"Countryman, Abner",
		"Courtney, Edgar",
		"Cowher, Antony",
		"Craig, Charlie",
		"Cram, Zacharias",
		"Cressman, Ted",
		"Crissman, Annie",
		"Davis, Palmer",
		"Downing, Casimir",
		"Earl, Missie",
		"Eckert, Janele",
		"Eisenman, Briar",
		"Fitzgerald, Love",
		"Fleming, Sidney",
		"Fuchs, Bridger",
		"Fulton, Rosalynne",
		"Fye, Webster",
		"Geyer, Rylan",
		"Greene, Charis",
		"Greif, Jem",
		"Guest, Sarahjeanne",
		"Harper, Phyllida",
		"Hildyard, Erskine",
		"Hoenshell, Eulalia",
		"Isaman, Lalo",
		"James, Diamond",
		"Jenkins, Merrill",
		"Jube, Bennett",
		"Kava, Marianne",
		"Kern, Linda",
		"Klockman, Jenifer",
		"Lacon, Quincy",
		"Laurenzi, Leland",
		"Leichter, Jeane",
		"Leslie, Kerrie",
		"Lester, Noah",
		"Llora, Roxana",
		"Lombardi, Polly",
		"Lowstetter, Louisa",
		"Mays, Emery",
		"Mccullough, Bernadine",
		"Mckinnon, Kristie",
		"Meyers, Hector",
		"Monahan, Penelope",
		"Mull, Kaelea",
		"Newbiggin, Osmond",
		"Nickolson, Alfreda",
		"Pawle, Jacki",
		"Paynter, Nerissa",
		"Pinney, Wilkie",
		"Pratt, Ricky",
		"Putnam, Stephanie",
		"Ream, Terrence",
		"Rumbaugh, Noelle",
		"Ryals, Titania",
		"Saylor, Lenora",
		"Schofield, Denice",
		"Schuck, John",
		"Scott, Clover",
		"Smith, Estella",
		"Smothers, Matthew",
		"Stainforth, Maurene",
		"Stephenson, Phillipa",
		"Stewart, Hyram",
		"Stough, Gussie",
		"Strickland, Temple",
		"Sullivan, Gertie",
		"Swink, Stefanie",
		"Tavoularis, Terance",
		"Taylor, Kizzy",
		"Thigpen, Alwyn",
		"Treeby, Jim",
		"Trevithick, Jayme",
		"Waldron, Ashley",
		"Wheeler, Bysshe",
		"Whishaw, Dodie",
		"Whitehead, Jericho",
		"Wilks, Debby",
		"Wire, Tallulah",
		"Woodworth, Alexandria",
		"Zaun, Jillie"
	);
	
	
	$aInfo = array(
		"Bedfordshire",
		"Buckinghamshire",
		"Cambridgeshire",
		"Cheshire",
		"Cornwall",
		"Cumbria",
		"Derbyshire",
		"Devon", 
		"Dorset", 
		"Durham", 
		"East Sussex",
		"Essex",
		"Gloucestershire",
		"Hampshire",
		"Hertfordshire", 
		"Kent", 
		"Lancashire",
		"Leicestershire",
		"Lincolnshire",
		"Norfolk",
		"Northamptonshire",
		"Northumberland", 
		"North Yorkshire", 
		"Nottinghamshire",
		"Oxfordshire",
		"Shropshire",
		"Somerset",
		"Staffordshire",
		"Suffolk", 
		"Surrey",
		"Warwickshire",
		"West Sussex",
		"Wiltshire",
		"Worcestershire", 
		"Durham", 
		"East Sussex",
		"Essex",
		"Gloucestershire",
		"Hampshire",
		"Hertfordshire", 
		"Kent", 
		"Lancashire",
		"Leicestershire",
		"Lincolnshire",
		"Norfolk",
		"Northamptonshire",
		"Northumberland", 
		"North Yorkshire", 
		"Nottinghamshire",
		"Oxfordshire",
		"Shropshire",
		"Somerset",
		"Staffordshire",
		"Suffolk", 
		"Surrey",
		"Warwickshire",
		"West Sussex",
		"Wiltshire",
		"Worcestershire", 
		"Durham", 
		"East Sussex",
		"Essex",
		"Gloucestershire",
		"Hampshire",
		"Hertfordshire", 
		"Kent", 
		"Lancashire",
		"Leicestershire",
		"Lincolnshire",
		"Norfolk",
		"Northamptonshire",
		"Northumberland", 
		"North Yorkshire", 
		"Nottinghamshire",
		"Oxfordshire",
		"Shropshire",
		"Somerset",
		"Staffordshire",
		"Suffolk", 
		"Surrey",
		"Warwickshire",
		"West Sussex",
		"Wiltshire",
		"Worcestershire", 
		"Durham", 
		"East Sussex",
		"Essex",
		"Gloucestershire",
		"Hampshire",
		"Hertfordshire", 
		"Kent", 
		"Lancashire",
		"Leicestershire",
		"Lincolnshire",
		"Norfolk",
		"Northamptonshire",
		"Northumberland", 
		"North Yorkshire", 
		"Nottinghamshire"
	);
	
	
	$input = strtolower( $_GET['input'] );
	$len = strlen($input);
	$limit = isset($_GET['limit']) ? (int) $_GET['limit'] : 0;
	
	
	$aResults = array();
	$count = 0;
	
	if ($len)
	{
		for ($i=0;$i<count($aUsers);$i++)
		{
			// had to use utf_decode, here
			// not necessary if the results are coming from mysql
			//
			if (strtolower(substr(utf8_decode($aUsers[$i]),0,$len)) == $input)
			{
				$count++;
				$aResults[] = array( "id"=>($i+1) ,"value"=>htmlspecialchars($aUsers[$i]), "info"=>htmlspecialchars($aInfo[$i]) );
			}
			
			if ($limit && $count==$limit)
				break;
		}
	}
	
	
	
	
	
	header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
	header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // always modified
	header ("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
	header ("Pragma: no-cache"); // HTTP/1.0
	
	
	
	if (isset($_REQUEST['json']))
	{
		header("Content-Type: application/json");
	
		echo "{\"results\": [";
		$arr = array();
		for ($i=0;$i<count($aResults);$i++)
		{
			$arr[] = "{\"id\": \"".$aResults[$i]['id']."\", \"value\": \"".$aResults[$i]['value']."\", \"info\": \"\"}";
		}
		echo implode(", ", $arr);
		echo "]}";
	}
	else
	{
		header("Content-Type: text/xml");

		echo "<?xml version=\"1.0\" encoding=\"utf-8\" ?><results>";
		for ($i=0;$i<count($aResults);$i++)
		{
			echo "<rs id=\"".$aResults[$i]['id']."\" info=\"".$aResults[$i]['info']."\">".$aResults[$i]['value']."</rs>";
		}
		echo "</results>";
	}
?>
Das Alles muss auf einem Server installiert werden. Die css in css/styles.css umbenennen, die JS-Datei in js/script.js umbenennen, die Datei zum testen in test.php umbenennen.

So wiet so gut!

Jetzt geht es darum das in Contenido zuinstallieren.
Das klappt auch alles soweit. Also Layout mit nur einem Container erstellen und dem das Modul zuweisen, dass nur die Liste für die Suchergebnisse erstellt. Aber dieses Modul ist gar nicht so einfach.

Folgendes habe ich hier bereits im Forum gefunden.

Code: Alles auswählen

<?php
cInclude('classes', 'class.search.php');
cInclude('classes', 'class.artspec.php');
cInclude('classes', 'class.template.php');
cInclude('includes', 'functions.api.string.php');
cInclude("frontend", "includes/functions.navigation.php");
cInclude('classes', 'class.article.php');

$cApiClient = new cApiClient($client);
$sSearchRange = $cApiClient->getProperty('searchrange', 'include');
$aSearchRange = explode(',', $sSearchRange);

// Get the search term
if (isset ($_POST['search_string'])) $searchterm = urldecode(strip_tags(htmlentities(stripslashes($_POST['search_string']))));

#Get all article specs
$sql = "SELECT
      idartspec, artspec
   FROM
      ".$cfg['tab']['art_spec']."
   WHERE
      client=$client AND
      lang=$lang AND
      online=1";


$db->query($sql);
$rows = $db->num_rows();
$aArtspecOnline = array ();
$aArtSpecs = array ();
$c = 1;
$d = 1;
$e = 1;
while ($db->next_record()) {
   $aArtSpecs[] = $db->f('idartspec');
}
$aArtSpecs[] = 0;

$action = $sess->url('front_content.php');

// Do the search
if (strlen(trim($searchterm)) > 0) {

   $searchterm = html_entity_decode($searchterm);
   $searchterm = utf8_decode($searchterm);
   
   $options = array (   'db'      =>      'regexp',      // use db function regexp
                  'combine'   =>      'and', // combine searchterms with and
                  'exclude'   =>      false, // => searchrange specified in 'cat_tree', 'categories' and 'articles' is excluded, otherwise included (exclusive)
                  'cat_tree'   =>      $aSearchRange, // searchrange
                  'artspecs'   =>      $aArtSpecs, // array of article specifications => search only articles with these artspecs
                  'protected'   =>      true
               ); // => do not search articles or articles in categories which are offline or protected

   $search = new Search($options);

   $cms_options = array ("head", "html", "htmlhead", "htmltext", "text"); // search only in these cms-types
   $search->setCmsOptions($cms_options);

   $search->intMinimumSimilarity = 0; 
   $aSearchResults = $search->searchIndex($searchterm, '');  
   
    header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
    header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // always modified
    header ("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
    header ("Pragma: no-cache"); // HTTP/1.0
    header("Content-Type: text/xml");
   
   // Now we build our list
   if (count($aSearchResults) > 0) {
   
      // We need our ul-Wrapper for prototype to work
      
  echo '<?xml version="1.0" encoding="utf-8" ?><results>'; 
   echo '<rs id="1">"<strong>'. $searchterm . '</strong>" ' .mi18n(" found in following articles:").'</rs>';
   
      // Get number of results
      $oSearchResults = new SearchResult($aSearchResults, $number_of_results);
      $num_res = $oSearchResults->getNumberOfResults();
      $num_pages = $oSearchResults->getNumberOfPages();
      
      $res_page = $oSearchResults->getSearchResultPage(1);
      
      foreach ($res_page as $key => $val) {
      
         // Read the article Results
         $oArt = new Article($key, $client, $lang);
         $aHeadline = $oSearchResults->getSearchContent($key, 'HTMLHEAD', 1);
         $headline = capiStrTrimAfterWord($aHeadline[0], 200); # conflict with capiStrTrimAfterWord and setReplacement('<strong>', '</strong>')
         $cat_id = $oSearchResults->getArtCat($key);
         
         echo '<rs><a href="front_content.php?idcat=' . $cat_id . '&idart=' . $key . '" title="' . $headline . '">' . $headline . '</a></rs>';
      
      }
      echo '</results>';
      
   } else {
   
      echo '<results>';
      echo '<rs id="1">'.mi18n("Your search for ").'"' . $searchterm . '"'.mi18n(" was not successful").'</rs>';
      echo '</results>';   
   }}

?>
Dieses Modul erstellt einen Contenido-Artikel - also html und eine UL mit LI-Ergebnissen. Dabei wird die Headline und der Link zu der Artikelseite mit ausgegeben.

Ich stehe nun vor 2 bis 3 Problemen.
1. Wie erstelle ich keinen HTML-Artikel sondern ein XML-Datei -> das Modul muss also die Ergebnissliste als XML-Datei speichern.
2. Wie kann ich jedem Suchergebniss eine ID (forlaufende Zahl) zuweisen

Grund:
Das Javascript klappt nur bei XML-Dateien.
Dabei muss Liste wie folgt aussehen:

Code: Alles auswählen

<?xml version="1.0" encoding="utf-8"?>
<results>
	<rs id="1" info="">Foobar</rs>
	<rs id="2" info="">Foobarfly</rs>
	<rs id="3" info="">Foobarnacle</rs>
</results>
3. Wie könnte mannoh die Verlinkung zu den Artikel mit einbeziehen.

Vielleicht hat ja jemand eine Idee für mich oder hat ebenfalls Interesse so etwas zu nutzen.

Ich wäre euch sehr dankbar.

MfG Steffen

Re: Ajax-Autosuggest für Suche

Verfasst: Do 30. Apr 2009, 00:24
von GaMbIt_
Sehr coole Sache das...

Hab zwar die Ganze Geschichte erst überflogen... aber klingt schon mal sehr interessant...

Eine XML Datei könnte man sicher im PHP erstellen und diese im Verzeichnis cache unterhalb dem Mandantenverzeichnis ablegen...

Zu Zwei, welches Suchergebnis meinst Du?
Das was die Suche ausspuckt oder die Suche durch die xml Datei?

Re: Ajax-Autosuggest für Suche

Verfasst: Do 30. Apr 2009, 07:29
von _wiewo_
GaMbIt_ hat geschrieben:Eine XML Datei könnte man sicher im PHP erstellen und diese im Verzeichnis cache unterhalb dem Mandantenverzeichnis ablegen...
contenido/classes/class.xmltree.php :D
hab mir damit ne stiemap für google gebastelt, suuuper easy damit dynamische xmls zu erstellen

Re: Ajax-Autosuggest für Suche

Verfasst: Do 30. Apr 2009, 08:51
von derSteffen
@ GaMbIt_

Das mit der ID, sprich die fortlaufende Zahl pro Suchergebniss, gibt es ja schon bei der Suchausgabe. Dort steht ja immer Ihrer Suche hat x Treffer ergeben und dann werden ja schon die Ergebnisse mit 1. 2. 3. 4. etc. dargestellt. Also ein Count ist ja bereits vorhanden.
Das was die Suche ausspuckt oder die Suche durch die xml Datei?
Das ist ja dann beides identisch.

@ _wiewo_
Aha das hört sich ja interessant an mit der contenido/classes/class.xmltree.php! Wie binde ich das denn ein, bzw. sage - okay daraus mache jetzt meine XML mit

Code: Alles auswählen

<?xml version="1.0" encoding="utf-8"?>
<results>
   <rs id="1" info="">Foobar</rs>
   <rs id="2" info="">Foobarfly</rs>
   <rs id="3" info="">Foobarnacle</rs>
</results>
Ich muss gesteht ich habe keine Ahnung von Java oder PHP - ich bin halt ein Visionär :-)

MfG Steffen

Re: Ajax-Autosuggest für Suche

Verfasst: Do 30. Apr 2009, 08:54
von _wiewo_
Ich versuchs mal kurz, präsise und verständlich zusammenzubasteln :)

melde mich hier gleich, uno momento =)

Re: Ajax-Autosuggest für Suche

Verfasst: Do 30. Apr 2009, 09:01
von _wiewo_

Code: Alles auswählen

<?php
// wichtige Klassen includen
cInclude('classes', 'class.xmltree.php');

// Objekte initialisieren
$oXmlTree = new XmlTree();

// Root des XML-Baums anlegen
$oResults =& $oXmlTree->addRoot('results');

// RS in den Root einfügen
$oResults->appendChild('rs', 'Foobar', array('id' => 1, 'info' => ''));
$oResults->appendChild('rs', 'Foobarfly', array('id' => 2, 'info' => ''));
$oResults->appendChild('rs', 'Foobarnacle', array('id' => 3, 'info' => ''));

// XML-Baum ausgeben
echo $oXmlTree->dump();
?>
mit doctype versehen und speichern schaffst alleine? :)

Re: Ajax-Autosuggest für Suche

Verfasst: Do 16. Jul 2009, 07:50
von Fips
Hallo derSteffen,
ich bin gerade im Forum über dieses Thema gestoßen und es klingt sehr gut. Ich wollte mal nachfragen, ob dies schon fertig umgesetzt wurde. Ich konnte das nicht genau herausfinden, da ich leider ein Neuanfänger bin.
Welche Dateien benötig man, wie sieht das Modul aus und wie binde ich dies in die Sucheingabe ein?

Im voraus vielen Dank.

Fips
Alle Zeiten sind UTC+01:00
Seite 1 von 1

Powered by phpBB® Forum Software © phpBB Limited

Deutsche Übersetzung durch phpBB.de