jQuery Mobile - using AJAX within Form to inject html Before Submission

I have an existing jQuery Mobile site that's working well. I now need to modify one of the HTML forms to use AJAX to update the page with some content that will be retrieved via a PHP script.

I've done this in the past with non jQuery Mobile sites and would typically add a Javascript to the head section and add this attribute to the form element (an input text field in this particular case):

onchange="updateFormContent(this.value)"
The actual script would be like this:

function updateFormContent(str)
{
if (str=="")
{
document.getElementById("Name").innerHTML="";
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("Name").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","nameSearch.php?name="+str,true);
xmlhttp.send();
}

I'm trying to do the same thing with my HTML Form on my jQuery Mobile site and getting stuck. Here's a simple example of my HTML form:

http://jsfiddle.net/4zjSx/

When the user enters something in the Name field I would like to trigger the "nameSearch.php?name=" php page which searches the database for any matching names and displays the results on the same page, updating a DIV in the process.

Appreciate any tips to point me in the right direction or any working examples of a jQueryMobile form page that does something similar.

Hi databuzz,

Sounds like you want an autocomplete form field? I'd probably use this:

http://jqueryui.com/demos/autocomplete/

Should work OK with jQuery Mobile I'd have thought.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/