Jump to content

refreshing javascript array

max_power

By max_power
in Javascript Help

Recommended Posts

max_power Member

max_power

Posted
Posted

Hi,

 

I have created an autosuggest via javascript from code I found on the internet. What I have done is that firstly I have put all the mysql result data in a php array whose contents are passed onto the javascript array. Now it all works but the problem is, that I have to refresh the page each to see any changes I make to the mysql db. How can I used ajax with my code?

 

 

Everything is in the one file with the php + javascript (I have bolded the relevant bits):

<html>
<?php		
[b]// select database
mysql_select_db($dbName) or die ("Unable to select database!");
$rs=mysql_query("select username from tbl_user");
$records=mysql_num_rows($rs);
$i=1;
while(list($name)=mysql_fetch_row($rs))
{ 
	echo $name.'<br />';
	if($i<$records) 
	{
		$array_names.="'$name',";
	}

	//if it's the last item from the series, don't put a comma after the value
	else 
	{
		$array_names.="'$name'";
	}
  $i++;
}[/b]
?>
    <head>
        <title>Autosuggest</title>
          
        <link rel="stylesheet" type="text/css" href="autosuggest.css" />        
        <script type="text/javascript">		

		function AutoSuggestControl(oTextbox /*:HTMLInputElement*/, 
									oProvider /*:SuggestionProvider*/) {

			/**
			 * The currently selected suggestions.
			 * @scope private
			 */   
			this.cur /*:int*/ = -1;

			/**
			 * The dropdown list layer.
			 * @scope private
			 */
			this.layer = null;

			/**
			 * Suggestion provider for the autosuggest feature.
			 * @scope private.
			 */
			this.provider /*:SuggestionProvider*/ = oProvider;

			/**
			 * The textbox to capture.
			 * @scope private
			 */
			this.textbox /*:HTMLInputElement*/ = oTextbox;

			//initialize the control5/24/2010
			this.init();

		}


		AutoSuggestControl.prototype.autosuggest = function (aSuggestions /*:Array*/,
															 bTypeAhead /*:boolean*/) {

			//make sure there's at least one suggestion
			if (aSuggestions.length > 0) {
				if (bTypeAhead) {
				   this.typeAhead(aSuggestions[0]);
				}

				this.showSuggestions(aSuggestions);
			} else {
				this.hideSuggestions();
			}
		};


		AutoSuggestControl.prototype.createDropDown = function () {

			var oThis = this;

			//create the layer and assign styles
			this.layer = document.createElement("div");
			this.layer.className = "suggestions";
			this.layer.style.visibility = "hidden";
			this.layer.style.width = this.textbox.offsetWidth;

			//when the user clicks on the a suggestion, get the text (innerHTML)
			//and place it into a textbox
			this.layer.onmousedown = 
			this.layer.onmouseup = 
			this.layer.onmouseover = function (oEvent) {
				oEvent = oEvent || window.event;
				oTarget = oEvent.target || oEvent.srcElement;

				if (oEvent.type == "mousedown") {
					oThis.textbox.value = oTarget.firstChild.nodeValue;
					oThis.hideSuggestions();
				} else if (oEvent.type == "mouseover") {
					oThis.highlightSuggestion(oTarget);
				} else {
					oThis.textbox.focus();
				}
			};


			document.body.appendChild(this.layer);
		};


		AutoSuggestControl.prototype.getLeft = function () /*:int*/ {

			var oNode = this.textbox;
			var iLeft = 0;

			while(oNode.tagName != "BODY") {
				iLeft += oNode.offsetLeft;
				oNode = oNode.offsetParent;        
			}

			return iLeft;
		};


		AutoSuggestControl.prototype.getTop = function () /*:int*/ {

			var oNode = this.textbox;
			var iTop = 0;

			while(oNode.tagName != "BODY") {
				iTop += oNode.offsetTop;
				oNode = oNode.offsetParent;
			}

			return iTop;
		};


		AutoSuggestControl.prototype.handleKeyDown = function (oEvent /*:Event*/) {

			switch(oEvent.keyCode) {
				case 38: //up arrow
					this.previousSuggestion();
					break;
				case 40: //down arrow 
					this.nextSuggestion();
					break;
				case 13: //enter
					this.hideSuggestions();
					break;
			}

		};


		AutoSuggestControl.prototype.handleKeyUp = function (oEvent /*:Event*/) {

			var iKeyCode = oEvent.keyCode;

			//for backspace ( and delete (46), shows suggestions without typeahead
			if (iKeyCode == 8 || iKeyCode == 46) {
				this.provider.requestSuggestions(this, false);

			//make sure not to interfere with non-character keys
			} else if (iKeyCode < 32 || (iKeyCode >= 33 && iKeyCode < 46) || (iKeyCode >= 112 && iKeyCode <= 123)) {
				//ignore
			} else {
				//request suggestions from the suggestion provider with typeahead
				this.provider.requestSuggestions(this, true);
			}
		};


		AutoSuggestControl.prototype.hideSuggestions = function () {
			this.layer.style.visibility = "hidden";
		};


		AutoSuggestControl.prototype.highlightSuggestion = function (oSuggestionNode) {

			for (var i=0; i < this.layer.childNodes.length; i++) {
				var oNode = this.layer.childNodes[i];
				if (oNode == oSuggestionNode) {
					oNode.className = "current"
				} else if (oNode.className == "current") {
					oNode.className = "";
				}
			}
		};


		AutoSuggestControl.prototype.init = function () {

			//save a reference to this object
			var oThis = this;

			//assign the onkeyup event handler
			this.textbox.onkeyup = function (oEvent) {

				//check for the proper location of the event object
				if (!oEvent) {
					oEvent = window.event;
				}    

				//call the handleKeyUp() method with the event object
				oThis.handleKeyUp(oEvent);
			};

			//assign onkeydown event handler
			this.textbox.onkeydown = function (oEvent) {

				//check for the proper location of the event object
				if (!oEvent) {
					oEvent = window.event;
				}    

				//call the handleKeyDown() method with the event object
				oThis.handleKeyDown(oEvent);
			};

			//assign onblur event handler (hides suggestions)    
			this.textbox.onblur = function () {
				oThis.hideSuggestions();
			};

			//create the suggestions dropdown
			this.createDropDown();
		};


		AutoSuggestControl.prototype.nextSuggestion = function () {
			var cSuggestionNodes = this.layer.childNodes;

			if (cSuggestionNodes.length > 0 && this.cur < cSuggestionNodes.length-1) {
				var oNode = cSuggestionNodes[++this.cur];
				this.highlightSuggestion(oNode);
				this.textbox.value = oNode.firstChild.nodeValue; 
			}
		};


		AutoSuggestControl.prototype.previousSuggestion = function () {
			var cSuggestionNodes = this.layer.childNodes;

			if (cSuggestionNodes.length > 0 && this.cur > 0) {
				var oNode = cSuggestionNodes[--this.cur];
				this.highlightSuggestion(oNode);
				this.textbox.value = oNode.firstChild.nodeValue;   
			}
		};


		AutoSuggestControl.prototype.selectRange = function (iStart /*:int*/, iLength /*:int*/) {

			//use text ranges for Internet Explorer
			if (this.textbox.createTextRange) {
				var oRange = this.textbox.createTextRange(); 
				oRange.moveStart("character", iStart); 
				oRange.moveEnd("character", iLength - this.textbox.value.length);      
				oRange.select();

			//use setSelectionRange() for Mozilla
			} else if (this.textbox.setSelectionRange) {
				this.textbox.setSelectionRange(iStart, iLength);
			}     

			//set focus back to the textbox
			this.textbox.focus();      
		}; 


		AutoSuggestControl.prototype.showSuggestions = function (aSuggestions /*:Array*/) {

			var oDiv = null;
			this.layer.innerHTML = "";  //clear contents of the layer

			for (var i=0; i < aSuggestions.length; i++) {
				oDiv = document.createElement("div");
				oDiv.appendChild(document.createTextNode(aSuggestions[i]));
				this.layer.appendChild(oDiv);
			}

			this.layer.style.left = this.getLeft() + "px";
			this.layer.style.top = (this.getTop()+this.textbox.offsetHeight) + "px";
			this.layer.style.visibility = "visible";

		};


		AutoSuggestControl.prototype.typeAhead = function (sSuggestion /*:String*/) {

			//check for support of typeahead functionality
			if (this.textbox.createTextRange || this.textbox.setSelectionRange){
				var iLen = this.textbox.value.length; 
				this.textbox.value = sSuggestion; 
				this.selectRange(iLen, sSuggestion.length);
			}
		};

		[b]function StateSuggestions() {
			this.customarray = new Array(<?php echo $array_names; ?>);
		}


		StateSuggestions.prototype.requestSuggestions = function (oAutoSuggestControl /*:AutoSuggestControl*/,
																  bTypeAhead /*:boolean*/) {
			var aSuggestions = [];
			var sTextboxValue = oAutoSuggestControl.textbox.value;

			if (sTextboxValue.length > 0){

				//search for matching states
				for (var i=0; i < this.customarray.length; i++) { 
					if (this.customarray[i].indexOf(sTextboxValue) == 0) {
						aSuggestions.push(this.customarray[i]);
					} 		
				}
			}

			//provide suggestions to the control
			oAutoSuggestControl.autosuggest(aSuggestions, bTypeAhead);
		};
[/b]			
		[b]window.onload = function () {
                var oTextbox = new AutoSuggestControl(document.getElementById("txt1"), new StateSuggestions());        
            }[/b]

        </script>	
    </head>
    <body>
       
        <p><input type="text" id="txt1" /></p>
    </body>
</html>

 

 

Also, since I am echoing the php array values into the javascript array, on the page it unnecessarily echos those values, how to I find a way to stop that?

 

Thanks.

Link to comment
https://forums.phpfreaks.com/topic/202708-refreshing-javascript-array/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.