Help needed with a "live search" script!

JavaScript
1

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! :slight_smile:

  • Mikko
2

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

3

Thanks, almost got it working :slight_smile:

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
4

Anyone?