How to perform search using AJAX?

I have following HTML code:

<table style="border: 1px solid #9f9f9f; float:right;">

                <tr>开发者_开发知识库
                <td><label for="status">Search Status</td>
                <td><input type="text" id="status" name="status" dojoType="dijit.form.TextBox" size="40" value="Please enter search criteria"/></td>
                </tr>
                <tr>
                <td><label for="push">Push to start</td>
                <td><button dojoType="dijit.form.Button"  style="width: 4em" type="button" name="submitButton" value="Submit" onclick="loadContents()"></button></td>
                </tr></table>

I want that when a user enter some keyword in the textbox and hit button, there is a Ajax call to retrieve search results from a simple txt file kept on my local. Please guide how do I achieve this? I have written loadContents method which simply retrieves the txt file contents but I want it search based. Sample code for loadContents:

<script type="text/javascript"> function loadContents() {var xmlhttp;
if (window.XMLHttpRequest)
  {xmlhttp=new XMLHttpRequest();
  }
else
  { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","content.txt",true);
xmlhttp.send();
}
</script>

Sounds like JQuery's ajax methods and JQuery UI AutoComplete would be a good thing for you to use - no point reinventing the wheel. (and you'll find it'll work in a lot more browsers!!)

Instead of making your ajax request directly to the text file, make it to a server-side page (you haven't mentioned what server-side technology you're using?) - that page should accept a query-string parameter which is used to search the text file and only return matching results to the client.