Jump to content

refreshing javascript array

max_power

By max_power
in Javascript Help

 Share

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
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
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.