How to disable enter in the following AJAX script

[John_Betong]

I have been using the following AJAX search script for a very long time and it works fine unless the Enter key is pressed… which results in clearing the search parameters.

According to the following link all I have to do is to insert a single JavaScript line to disable enter:

Mozilla.org->preventDefault();

I have tried to insert event.preventDefault();" in numerous places and all it does is to prevent the search from working

script>
var liveSearch = function(inputID) {
	this.input = document.getElementById(inputID);
	if (this.input) {
		this.initialise();
	}
}
liveSearch.prototype = {
	initialise: function()
	{
		this.previousSearch = null;
		this.canSearch = 1;
		this.input.addEventListener("keyup", this.onKeyUp.bind(this));
	},
	onKeyUp : function()
	{
		if (this.canSearch) {
			this.canSearch = 0;
			setTimeout(function(){
				var value = this.input.value.toLowerCase();
				if (value != this.previousSearch) {
					this.doSearch(value);
				}
				this.previousSearch = value;
				this.canSearch = 1;
			}.bind(this), 500);
		}
	},
	doSearch : function(str)
	{
	// START: do your ajax call here ============================================
	    if (str.length==0)
	    {
	      document.getElementById("livesearch").innerHTML="";
	      // document.getElementById("livesearch").style.border="0px";
	      return;
	    }
	    if (window.XMLHttpRequest)
	    {
	      // code for IE7+, Firefox, Chrome, Opera, Safari
	      xmlhttp=new XMLHttpRequest();
	    }else{  // code for IE6, IE5
	      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	    }
	    xmlhttp.onreadystatechange=function() {
	      if (xmlhttp.readyState==4 && xmlhttp.status==200)
	      {
	        document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
	        // document.getElementById("livesearch").style.border="1px solid #A5ACB2";
	      }
	    }
	    xmlhttp.open("GET", "AJAX-0048.php?q="+str,true);
	    xmlhttp.send();
	// END: do your ajax call here ============================================
	}
}
var myLiveSearch = new liveSearch("bufferedInput");
</script>

[m3g4p0p]

Hey @John_Betong, it does not clear the input for me… do you maybe have the search input wrapped in a form though? In this case pressing the enter key would submit the form, and if it doesn’t have an action attribute this would basically reload the page (and thus clear the input). You might then listen to submit events of the form, and prevent that event.

[John_Betong]

Yes the script is called from the following form:

    <form action="?" method="get">
      <div>
        <label class="fgs fsl"> Search: </label>
        <input
          id    = "bufferedInput"
          type  = "text"
          size  = "42"
          name  = "search"
          class = "fsn"
          value = ""
        >  
        <?php
            $onKeyUp = 'onkeyup = "showResult(this.value)"';
        ?>
      </div>
    </form>

[Paul_Wilkins]

Normally with a form, the submit event of the form is what the enter key triggers. I recommend that you use a web browser to investigate and find out what function is assigned as the submit handler of the form.

If you have trouble doing that investigation, there are several of us here that can do that to help you with, when we gain access to a demo or a live version of the page.

[John_Betong]

@Paul_Wilkins, I just removed the form and the enter/return key now has no effect.

The search characters are still being passed via AJAX to the PHP script to search and display the results.

Many thanks