Member Avatar for sandipan.rcciit
sandipan.rcciit 0 Light Poster

Hi frnds,

I found a code that is make autosuggestion text box according to user input.
i make some changes on it and it works fine for auto suggestion text box.

but now i want to add a button in a side of that text box,when we click on it all relative data will come as a auto suggestion. Simply i want to make it behave like auto suggest feature with combo box.

but in that code they are using a class that is worked only when user type text on text box.but click on button it not worked .

I am tried but not able to find out what to do????? I dont have very good knowledge in javascript.

plz help me out...

plz see the attachment

i think the changes may be done in AutoCompleate.js and in example.php

plz help me...

prototype.js

AutoComplete.js

ac.php

examples.php

<?php
$q=mysql_connect("localhost","dt10","$@nd1p@n");
mysql_select_db("dt10",$q);

	$s = $_REQUEST['s'];
	 $matches=array();
   $matches[]=$s;
	$matches_lowercase = array_map('strtolower', $matches);
	array_multisort($matches_lowercase, SORT_ASC, SORT_STRING, $matches);
	
	$type = 'text/xml';
	$response = '';
	
	ob_clean();
	
	switch($_REQUEST['m'])
	{
		case 'json':
			$type = "text/plain";
			//
			// You don't have to do both, but Prototype has automatic
			// evaluation support if you use the X-JSON header instead of the body.
			//
			$response = json_encode($matches);
			header("X-JSON: $response");
			break;
		
		case 'text':
			$type = "text/plain";
			$response = join("\r\n", $matches);
			break;
			
		case 'xml':
		default:
			$type = "application/xml";
			
			$dom = new DOMDocument('1.0');
			$root = $dom->createElement('Suggestions');
			for($i = 0; $i < count($matches); $i++)
			{
				$e = $dom->createElement('suggestion', $matches[$i]);
				$root->appendChild($e);
			}
			
			$dom->appendChild($root);
			$response = $dom->saveXML();
			break;		
	}

	header("Content-Type: $type");
	echo $response;
	exit;

?>
var AutoComplete = Class.create({
	/**
	 * The select object
	 * @type {HTMLSelectElement}
	 */
	selector: null,
	/**
	 * The component that triggers the suggest
	 * @type {HTMLInputElement}
	 */
	input: null,
	/**
	 * The timeout between lookups
	 * @type {Number}
	 * @private
	 */
	_timeout: null,
	/**
	 * Visisbility status of the selector object
	 * @type {Boolean}
	 */
	visible: false,
	/**
	 * Flag indicating whether the components have been laid out
	 * @type {Boolean}
	 */
	drawn: false,

	/**
	 * Hide timeout
	 * @type {Number}
	 * @private
	 */
	_hideTimeout: null,

	/**
	 * The configuration options for the instance
	 * @type {AutoComplete.Options}
	 */
	options: null,

	/**
	 * @param {Object} input ID of form element, or dom element,  to _suggest on
	 * @param {String} URL of dictionary
	 * @param {Object} options
	 */
	initialize: function(input, action, options)
	{
		this.action = action;
		this.input = $(input);
		this.input.autocomplete = "off";
		this.options = new AutoComplete.Options(options || {});
        
		if(!this.input)
			alert('No input field/binding field given or found')

		if(!this.action)
			alert('No action url specified');

		this.selector = document.createElement('select');

		Event.observe(this.input, 'focus', this._onInputFocus.bindAsEventListener(this));
		//Event.observe(this.input, 'keyup', this._onInputKeyUp.bindAsEventListener(this));
		Event.observe(this.input, 'keydown', this._onInputKeyDown.bindAsEventListener(this));
		Event.observe(this.input, 'blur', this._onInputBlur.bindAsEventListener(this));
		Event.observe(this.selector, 'blur', this._onSelectorBlur.bindAsEventListener(this));
		Event.observe(this.selector, 'focus', this._onSelectorFocus.bindAsEventListener(this));
		Event.observe(this.selector, 'change', this._onSelectorChange.bindAsEventListener(this));

		Event.observe(window, 'resize', this._reposition.bind(this));
		Event.observe(window, 'scroll', this._reposition.bind(this));
	},

	/**
	 * The input fields focus event handler
	 */
	_onInputFocus: function(event)
	{
		this._onSelectorFocus(event);
	},

	/**
	 * The selector's blur event handler
	 * @param {Event} event
	 * @private
	 */
	_onSelectorBlur: function(event)
	{
		this._onInputBlur(event);
	},
	/**
	 * The input's blur event handler
	 * @param {Event} event
	 * @private
	 */
	_onInputBlur: function(event)
	{
		this._hideTimeout = setTimeout(this._checkOnBlur.bind(this), 100);
	},
	/**
	 * Complete's the blur event handlers. Used as a proxy to avoid event collisions when blurring from the input
	 * and focusing on the selector during a mouse navigation
	 * @private
	 */
	_checkOnBlur:function()
	{
		this._hideTimeout = null
		this.hide();
	},
	/**
	 * The input's key-up event handler
	 * @param {Event} event
	 * @private
	 */
	_onInputKeyUp: function(event)
	{
		this._suggest(event)
			&& Event.stop(event);
	},
	/**
	 * The input's key-down event handler
	 * @param {Event} event
	 * @private
	 */
	_onInputKeyDown: function(event)
	{
		this._suggest(event)
			&& Event.stop(event);
	},
	/**
	 * The selectors's focus event handler.
	 * @param {Event} event
	 * @private
	 */
	_onSelectorFocus: function(event)
	{
		if(this._hideTimeout)
		{
			clearTimeout(this._hideTimeout);
			this._hideTimeout = null;
		}
	},
	/**
	 * The selector's change event handler
	 * @param {Event} event
	 * @private
	 */
	_onSelectorChange: function(event)
	{
		this.select();
	},
	/**
	 * Lays the UI elements of the control out, sets interaction options
	 * @param {Object} event Event
	 */
	draw: function()
	{
		if(this.drawn) return;
		if(this.options.cssClass)
			this.selector.className = this.options.cssClass;
		Element.setStyle(this.selector, {
			display: 'none',
			position: 'absolute',
			width: this.input.offsetWidth + 'px'
		});
		this.selector.size = this.options.size;
		document.body.appendChild(this.selector);
		this.input.autocomplete = 'off';
		this.drawn = true;
	},

	/**
	 * Hides the option box
	 */
	hide: function()
	{
		if(!this.drawn || !this.visible) return;
		this.visible = false;
		if(window.Scriptaculous)
		{
			new Effect.BlindUp(this.selector, {
				duration: this.options.delay,
				queue: 'end',
				afterFinish: function(event){
					Element.setStyle(this.selector,{
						display: 'none'
					});
					this.selector.options.length = 0;
					setTimeout(this._restoreFocus.bind(this),50);
				}.bind(this)
			});
		}
		else
		{
			Element.setStyle(this.selector,{
				display: 'none'
			});
			this.selector.options.length = 0;
			// FF hack, wasn't selecting without this small delay for some reason
			setTimeout(this._restoreFocus.bind(this),50);
		}
	},
	/**
	 * Resores the focus to the input control to avoid the cursor getting lost somewhere.
	 * @private
	 */
	_restoreFocus: function() {
		this.input.focus();
	},
	/**
	 * Displays the select box
	 */
	show: function()
	{
		if(!this.drawn) this.draw();
		var trigger = null;
		if(this.selector.options.length)
		{
			if(window.Scriptaculous)
			{
				new Effect.BlindDown(this.selector,{
					duration: this.options.delay,
					queue: 'end'
				});
			}
			else
			{
				Element.setStyle(this.selector,{
					display: 'inline'
				});
			}
			this._reposition();
			this.visible = true;
		}
	},

	/**
	 * Removes the timeout function set by a suggest
	 * @private
	 */
	_cancelTimeout: function()
	{
		if(this._timeout)
		{
			clearTimeout(this._timeout);
			this._timeout = null;
		}
	},

	/**
	 * Triggers the suggest interaction
	 * @param {Object} event The interaction event (keyboard or mouse)
	 * @return {Boolean} Whether to stop the event
	 * @private
	 */
	_suggest: function(event)
	{
		this._cancelTimeout();
		var key = Event.keyPressed(event);
		var ignoreKeys = [
			20, // caps lock
			16, // shift
			17, // ctrl
			91, // Windows key
			121, // F1 - F12
			122,
			123,
			124,
			125,
			126,
			127,
			128,
			129,
			130,
			131,
			132,
			45, // Insert
			36, // Home
			35, // End
			33, // Page Up
			34, // Page Down
			144, // Num Lock
			145, // Scroll Lock
			44, // Print Screen
			19, // Pause
			93, // Mouse menu key
		];
		if(ignoreKeys.indexOf(key) > -1)
			return false;

		switch(key)
		{
			case Event.KEY_LEFT:
			case Event.KEY_RIGHT:
				return false;
				break;
			case Event.KEY_TAB:
			case Event.KEY_BACKSPACE:
			case 46: //Delete
				this.cancel();
				return false;
				break;
			case Event.KEY_RETURN:
				if(this.visible)
				{
					this.select();
					return true;
				}
				return false;
				break;
			case Event.KEY_ESC:
				this.cancel();
				return true;
				break;
			case Event.KEY_UP:
			case Event.KEY_DOWN:
				this._interact(event);
				return true;
				break;
			default:
				break;
		}

		if(this.input.value.length >= this.options.threshold - 1)
		{
			alert(this.input.value)
			this._timeout = setTimeout(this._sendRequest.bind(this), 1000 * this.options.delay);
		}
		return false;
	},

	/**
	 * Sends the suggestion request
	 * @private
	 */
	_sendRequest: function()
	{
		this._request = new Ajax.Request(this.action + this.input.value, {
			onComplete: this._process.bind(this),
			method: this.options.requestMethod
		});
	},

	/**
	 * Repositions the selector (if visible) to match the new
	 * coords of the input.
	 * @private
	 */
	_reposition: function()
	{
		if(!this.drawn) return;
		var pos = Position.cumulativeOffset(this.input);
		pos.push(pos[0] + this.input.offsetWidth);
		pos.push(pos[1] + this.input.offsetHeight);
		Element.setStyle(this.selector,{
			left: pos[0] + 'px',
			top: pos[3] + 'px'
		});
	},

	/**
	 * Processes the resulting  from a suggestion request, adds options to the suggestion box.
	 * @param {XMLHTTPRequest} objXML The XMLHTTPRequest created by _sendRequest
	 * @param {String} jsonHeader the string of json commands to execute if the return type is json
	 * @private
	 */
	_process: function(objXML, jsonHeader)
	{
		this.selector.options.length = 0;
		switch(this.options.resultFormat)
		{
			case AutoComplete.Options.RESULT_FORMAT_XML:
				this._parseXML(objXML.responseXML);
				break;
			case AutoComplete.Options.RESULT_FORMAT_JSON:
				if(!jsonHeader)
				{
					jsonHeader = objXML.responseText && objXML.responseText.isJSON() ?
						objXML.responseText.evalJSON() : null;
				}
				this._parseJSON(jsonHeader);
				break;
			case AutoComplete.Options.RESULT_FORMAT_TEXT:
				this._parseText(objXML.responseText);
				break;
			default:
				alert("Unable to parse result type. Make sure you've set the resultFormat option correctly");
				break;
		}

		if(this.selector.options.length > (this.options.size))
			this.selector.size = this.options.size;
		else
			this.selector.size = this.selector.options.length > 1 ? this.selector.options.length : 2;

		if(this.selector.options.length)
		{
			//none selected by default
			this.selector.selectedIndex = -1;
			this.show();
		}
		else
			this.cancel();
	},

	/**
	 * Parses the XML result, adds options
	 * @param {XML} xml the XML of suggestions to parse
	 */
	_parseXML: function(xml)
	{
		var suggestions = null;
		for(var i = 0; i < xml.childNodes.length; i++)
		{
			if(xml.childNodes[i].tagName)
			{
				suggestions = xml.childNodes[i].childNodes;
			}
		}
		if(!suggestions)
		{
			alert("Could not parse response XML.");
			return;
		}
		for(i = 0; i < suggestions.length; i++)
		{
			suggestion = suggestions.item(i).firstChild.nodeValue;
			this._addOption(suggestion);
		}
	},
	/**
	 * Parses the JSON result, adds options
	 * @param {String} json The json response to parse
	 */
	_parseJSON: function(json)
	{
		if(!json) json = [];
		for(i = 0; i < json.length; i++)
			this._addOption(json[i]);
	},
	/**
	 * Parses the TEXT result, adds options
	 * @param {String} text The text response to parse
	 */
	_parseText: function(text)
	{
		var suggestions = (text||"").split(/\n/);
		for(i = 0; i < suggestions.length; i++)
			this._addOption(suggestions[i]);
	},
	/**
	 * Creates a suggestion option for the given suggestion,
	 * adds it to the selector object.
	 * @param {String} suggestion The suggestion
	 */
	_addOption: function(suggestion)
	{
		var opt = new Option(suggestion, suggestion);
		Prototype.Browser.IE ? this.selector.add(opt) : this.selector.add(opt, null);
	},

	/**
	 * Clears and hi
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script type="text/javascript" src="prototype.js"></script>
		<script type="text/javascript" src="AutoComplete.js"></script>
		<title>AutoComplete 1.2 Scriptaculous Example</title>
        	<script type="text/javascript">
 			    
			function go()
			{ 
				new AutoComplete('my_ac', 'ac.php?m=xml&s=all',{delay: .25});
				}
				
			
				
				</script>
	</head>
	<body>
		
			<form method="get">
			<input type="text" id="my_ac" name="my_ac" size="10" autocomplete="off"  />
            <img src="sr.png"  onClick="go()" />
			</form>
			<script type="text/javascript">
			 	new AutoComplete('my_ac', 'ac.php?m=xml&s=',{delay: .25});
            </script>
			<br/>
	</body>
</html>
/*  Prototype JavaScript framework, version 1.6.0.2
 *  (c) 2005-2008 Sam Stephenson
 *
 *  Prototype is freely distributable under the terms of an MIT-style license.
 *  For details, see the Prototype web site: http://www.prototypejs.org/
 *
 *--------------------------------------------------------------------------*/

var Prototype = {
  Version: '1.6.0.2',

  Browser: {
    IE:     !!(window.attachEvent && !window.opera),
    Opera:  !!window.opera,
    WebKit: navigator.userAgent.indexOf('AppleWebKit/') > -1,
    Gecko:  navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') == -1,
    MobileSafari: !!navigator.userAgent.match(/Apple.*Mobile.*Safari/)
  },

  BrowserFeatures: {
    XPath: !!document.evaluate,
    ElementExtensions: !!window.HTMLElement,
    SpecificElementExtensions:
      document.createElement('div').__proto__ &&
      document.createElement('div').__proto__ !==
        document.createElement('form').__proto__
  },

  ScriptFragment: '<script[^>]*>([\\S\\s]*?)<\/script>',
  JSONFilter: /^\/\*-secure-([\s\S]*)\*\/\s*$/,

  emptyFunction: function() { },
  K: function(x) { return x }
};

if (Prototype.Browser.MobileSafari)
  Prototype.BrowserFeatures.SpecificElementExtensions = false;


/* Based on Alex Arnell's inheritance implementation. */
var Class = {
  create: function() {
    var parent = null, properties = $A(arguments);
    if (Object.isFunction(properties[0]))
      parent = properties.shift();

    function klass() {
      this.initialize.apply(this, arguments);
    }

    Object.extend(klass, Class.Methods);
    klass.superclass = parent;
    klass.subclasses = [];

    if (parent) {
      var subclass = function() { };
      subclass.prototype = parent.prototype;
      klass.prototype = new subclass;
      parent.subclasses.push(klass);
    }

    for (var i = 0; i < properties.length; i++)
      klass.addMethods(properties[i]);

    if (!klass.prototype.initialize)
      klass.prototype.initialize = Prototype.emptyFunction;

    klass.prototype.constructor = klass;

    return klass;
  }
};

Class.Methods = {
  addMethods: function(source) {
    var ancestor   = this.superclass && this.superclass.prototype;
    var properties = Object.keys(source);

    if (!Object.keys({ toString: true }).length)
      properties.push("toString", "valueOf");

    for (var i = 0, length = properties.length; i < length; i++) {
      var property = properties[i], value = source[property];
      if (ancestor && Object.isFunction(value) &&
          value.argumentNames().first() == "$super") {
        var method = value, value = Object.extend((function(m) {
          return function() { return ancestor[m].apply(this, arguments) };
        })(property).wrap(method), {
          valueOf:  function() { return method },
          toString: function() { return method.toString() }
        });
      }
      this.prototype[property] = value;
    }

    return this;
  }
};

var Abstract = { };

Object.extend = function(destination, source) {
  for (var property in source)
    destination[property] = source[property];
  return destination;
};

Object.extend(Object, {
  inspect: function(object) {
    try {
      if (Object.isUndefined(object)) return 'undefined';
      if (object === null) return 'null';
      return object.inspect ? object.inspect() : String(object);
    } catch (e) {
      if (e instanceof RangeError) return '...';
      throw e;
    }
  },

  toJSON: function(object) {
    var type = typeof object;
    switch (type) {
      case 'undefined':
      case 'function':
      case 'unknown': return;
      case 'boolean': return object.toString();
    }

    if (object === null) return 'null';
    if (object.toJSON) return object.toJSON();
    if (Object.isElement(object)) return;

    var results = [];
    for (var property in object) {
      var value = Object.toJSON(object[property]);
      if (!Object.isUndefined(value))
        results.push(property.toJSON() + ': ' + value);
    }

    return '{' + results.join(', ') + '}';
  },

  toQueryString: function(object) {
    return $H(object).toQueryString();
  },

  toHTML: function(object) {
    return object && object.toHTML ? object.toHTML() : String.interpret(object);
  },

  keys: function(object) {
    var keys = [];
    for (var property in object)
      keys.push(property);
    return keys;
  },

  values: function(object) {
    var values = [];
    for (var property in object)
      values.push(object[property]);
    return values;
  },

  clone: function(object) {
    return Object.extend({ }, object);
  },

  isElement: function(object) {
    return object && object.nodeType == 1;
  },

  isArray: function(object) {
    return object != null && typeof object == "object" &&
      'splice' in object && 'join' in object;
  },

  isHash: function(object) {
    return object instanceof Hash;
  },

  isFunction: function(object) {
    return typeof object == "function";
  },

  isString: function(object) {
    return typeof object == "string";
  },

  isNumber: function(object) {
    return typeof object == "number";
  },

  isUndefined: function(object) {
    return typeof object == "undefined";
  }
});

Object.extend(Function.prototype, {
  argumentNames: function() {
    var names = this.toString().match(/^[\s\(]*function[^(]*\((.*?)\)/)[1].split(",").invoke("strip");
    return names.length == 1 && !names[0] ? [] : names;
  },

  bind: function() {
    if (arguments.length < 2 && Object.isUndefined(arguments[0])) return this;
    var __method = this, args = $A(arguments), object = args.shift();
    return function() {
      return __method.apply(object, args.concat($A(arguments)));
    }
  },

  bindAsEventListener: function() {
    var __method = this, args = $A(arguments), object = args.shift();
    return function(event) {
      return __method.apply(object, [event || window.event].concat(args));
    }
  },

  curry: function() {
    if (!arguments.length) return this;
    var __method = this, args = $A(arguments);
    return function() {
      return __method.apply(this, args.concat($A(arguments)));
    }
  },

  delay: function() {
    var __method = this, args = $A(arguments), timeout = args.shift() * 1000;
    return window.setTimeout(function() {
      return __method.apply(__method, args);
    }, timeout);
  },

  wrap: function(wrapper) {
    var __method = this;
    return function() {
      return wrapper.apply(this, [__method.bind(this)].concat($A(arguments)));
    }
  },

  methodize: function() {
    if (this._methodized) return this._methodized;
    var __method = this;
    return this._methodized = function() {
      return __method.apply(null, [this].concat($A(arguments)));
    };
  }
});

Function.prototype.defer = Function.prototype.delay.curry(0.01);

Date.prototype.toJSON = function() {
  return '"' + this.getUTCFullYear() + '-' +
    (this.getUTCMonth() + 1).toPaddedString(2) + '-' +
    this.getUTCDate().toPaddedString(2) + 'T' +
    this.getUTCHours().toPaddedString(2) + ':' +
    this.getUTCMinutes().toPaddedString(2) + ':' +
    this.getUTCSeconds().toPaddedString(2) + 'Z"';
};

var Try = {
  these: function() {
    var returnValue;

    for (var i = 0, length = arguments.length; i < length; i++) {
      var lambda = arguments[i];
      try {
        returnValue = lambda();
        break;
      } catch (e) { }
    }

    return returnValue;
  }
};

RegExp.prototype.match = RegExp.prototype.test;

RegExp.escape = function(str) {
  return String(str).replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1');
};

/*--------------------------------------------------------------------------*/

var PeriodicalExecuter = Class.create({
  initialize: function(callback, frequency) {
    this.callback = callback;
    this.frequency = frequency;
    this.currentlyExecuting = false;

    this.registerCallback();
  },

  registerCallback: function() {
    this.timer = setInterval(this.onTimerEvent.bind(this), this.frequency * 1000);
  },

  execute: function() {
    this.callback(this);
  },

  stop: function() {
    if (!this.timer) return;
    clearInterval(this.timer);
    this.timer = null;
  },

  onTimerEvent: function() {
    if (!this.currentlyExecuting) {
      try {
        this.currentlyExecuting = true;
        this.execute();
      } finally {
        this.currentlyExecuting = false;
      }
    }
  }
});
Object.extend(String, {
  interpret: function(value) {
    return value == null ? '' : String(value);
  },
  specialChar: {
    '\b': '\\b',
    '\t': '\\t',
    '\n': '\\n',
    '\f': '\\f',
    '\r': '\\r',
    '\\': '\\\\'
  }
});

Object.extend(String.prototype, {
  gsub: function(pattern, replacement) {
    var result = '', source = this, match;
    replacement = arguments.callee.prepareReplacement(replacement);

    while (source.length > 0) {
      if (match = source.match(pattern)) {
        result += source.slice(0, match.index);
        result += String.interpret(replacement(match));
        source  = source.slice(match.index + match[0].length);
      } else {
        result += source, source = '';
      }
    }
    return result;
  },

  sub: function(pattern, replacement, count) {
    replacement = this.gsub.prepareReplacement(replacement);
    count = Object.isUndefined(count) ? 1 : count;

    return this.gsub(pattern, function(match) {
      if (--count < 0) return match[0];
      return replacement(match);
    });
  },

  scan: function(pattern, iterator) {
    this.gsub(pattern, iterator);
    return String(this);
  },

  truncate: function(length, truncation) {
    length = length || 30;
    truncation = Object.isUndefined(truncation) ? '...' : truncation;
    return this.length > length ?
      this.slice(0, length - truncation.length) + truncation : String(this);
  },

  strip: function() {
    return this.replace(/^\s+/, '').replace(/\s+$/, '');
  },

  stripTags: function() {
    return this.replace(/<\/?[^>]+>/gi, '');
  },

  stripScripts: function() {
    return this.replace(new RegExp(Prototype.ScriptFragment, 'img'), '');
  },

  extractScripts: function() {
    var matchAll = new RegExp(Prototype.ScriptFragment, 'img');
    var matchOne = new RegExp(Prototype.ScriptFragment, 'im');
    return (this.
  • 1 Contributor
  • 0 Replies
  • 60 Views
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.