SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help needed with a "live search" script!

    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:
    Code:
    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']
    Code:
    <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
    Code:
    <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

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mikkoj83 View Post
    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?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, almost got it working

    Code:
    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. #4
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone?


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •