Help needed with a "live search" script!

[mikkoj83]

Hi
I have a mootools javascript that uses a written field value "searchString" to be instantly passed to a (requested) php-script which searches for matches in a database with an SQL-query. The script works fine, as is. I need a little modification though for it to better service it's purpose. (You may use or copy this script to yourself if you want to, I don't mind.), here it goes, I'll explain further in this topic what I'd need..

The search.js:

Search=new Class({
	Implements:[Options,Events],
	options:{
		inputDelay:400,
		inputMinLength:2,
		request:{
			url:'table.php',
			method:'get',
			link:'cancel'
		},
		validate:{}
	},
	searchFields:$H(),
	lastSearchValues:{},
	timer:null,
	targetElm:null,
	initialize:function(target,elements,options)
	{
		this.targetElm=$(target);
		this.addSearchFields(elements);
		this.setOptions(options);
	},
	addSearchFields:function(one)
	{
		var that=this;
		var fields=$A(arguments).flatten();
		fields.each(function(elm){
			elm=$(elm);
			if(elm.get('tag')=='input' && elm.get('type')=='text')
			{
				elm.addEvent('keypress',function()
				{
					that.resetTimer();
				})
			}
			else
			{
				elm.addEvent('change',that.update.bind(that));
			}
			that.searchFields[elm.get('name')]=elm;
		});
	},
	resetTimer:function(){
		$clear(this.timer);
		this.timer=this.update.delay(this.options.inputDelay,this);
	},
	update:function(){
		$clear(this.timer);
		var searchValues={};
		this.searchFields.each(function(elm,key){
			searchValues[key]=elm.get('value');
		});
		if(this.lastSearchValues==searchValues)
			return false;
		
		this.lastSearchValues=searchValues;
		
		var validated=this.validate(searchValues);
		if(validated!==true)
			return false;
		
		var that=this;
		
		var requestOptions={
			update:this.targetElm,
			onComplete:function(){
			
			that.fireEvent('complete');}
		};
		requestOptions=$merge(requestOptions,this.options.request);
		new Request.HTML(requestOptions).send({data:searchValues});
	},
	validate:function(values)
	{
		var result=true;
		$H(values).each(function(value,key){

			if(result!==true)
				return false;
				
			if(!this.options.validate[key])
				return false;
			
			if(!value.match(this.options.validate[key]))
				result=key;
			
		},this);
		return result;
	}
});

That code passes value of "searchString" -textfield updated with each keypress/change in the fields value.

INDEX.PHP / HEADER, results.php gets searchString in $_GET['searchString']

<script src="search.js" type="text/javascript"></script>
<script type="text/javascript">
	window.addEvent('domready',function(){			
		search=new Search($('searchResults'),$$('.searchCondition'),{
			request:{
				url:'results.php',
				encoding:'UTF-8'
			},
			validate:{
			}
		});
	});
</script>

SEARCH.PHP

<div id="searchBar">
<form name="searchForm">
	Search string(s)&nbsp;&nbsp;<input type="text" name="searchString" id="searchString" class="searchCondition inputFields" value="<?php echo $_GET['searchString']; ?>" />
</form>
</div>
<br />
<div id="resultContainer">
	<div id="searchResults"></div>
</div>

What I need?
Now, let's say I open a search result for viewing in "result.php", like: result.php?searchString=Paul (to a new page)
Then I do what I do, go back to search.php?searchString=Paul
PHP adds this searchString from $_GET to the searchField, but nothing happens before I make a change to this field (e.g. remove a letter or write something to the field). How would I need to modify this javascript code, so that If there already is a value in text field "searchString", it would activate the search?

Any help or ideas appreciated greatly, thank you beforehand!

- Mikko

[paul_wilkins]

Now, let's say I open a search result for viewing in "result.php", like: result.php?searchString=Paul (to a new page)
Then I do what I do, go back to search.php?searchString=Paul
PHP adds this searchString from $_GET to the searchField, but nothing happens before I make a change to this field (e.g. remove a letter or write something to the field). How would I need to modify this javascript code, so that If there already is a value in text field "searchString", it would activate the search?

Could you add update to the initialize section, and in the domready section, run that update if the form field isn't empty?

[mikkoj83]

Thanks, almost got it working

initialize:function(target,elements,options)
	{
		this.targetElm=$(target);
		this.addSearchFields(elements);
		this.setOptions(options);
                this.update(); // ADDED THIS HERE!
	},

Now when I go back to search results, it returns all rows, since $_GET['searchString'] is empty. It is defined in url variables, but I suppose search.js unsets it somehow?

- Mikko

[mikkoj83]

Anyone?