Response title
This is preview!
AutoComplete XML Response
in Using jQuery UI
•
12 years ago
Hi
I'm a newbie and trying to get the autocomplete functionality working for a basic textbox on a html page. There is a third party service providing the XML response to an XML Post request. I designed a static request string in XML and fired it at the service and capture the response in an alert message. I am trying now to make the connection with the autocomplete box and can't fathom how to do it after hours of tearing my hair out. The idea would be that as the user types the results(continual calls) are narrowed down so the xml response needs a dynamic feed to the textbox. I am not sure whether to extract the attributes of the xml response on the fly and read the values into an array or to take the xml response and parse it. I tried both below with no success. I would prefer whichever is faster.The xml response is in much the same format as the call. I have highlighted the bit I need to bind to the textbox which is where I am getting stuck.
I have pasted my code below...
Any help would be greatly appreciated
Thanks
<body> <input type="text" name="date" id="date" /> <label>Address:</label><input type="text" size="20" id="address" name="id"> <div id="map_canvas" style="width:300px; height:300px"></div><br/> <label>latitude: </label><input id="latitude" type="text"/><br/> <label>longitude: </label><input id="longitude" type="text"/> </body> <html>
<
head><
script>$(document).ready(
function () {$(
"input#address").autocomplete(getMatches(), {delay: 10,
minChars: 2,
matchSubset: 1,
matchContains: 1,
minChars: 0,
parse: parseXML,
formatItem: formatItem,
formatResult: formatResult
}).result(
function (event, item) {window.location.href = item.text
});
// this function will parse xml and return as a array of string function parseXML(xml) { var results = [];$(xml).find(
'info').each(function () { var text = $.trim($(this).find('text').text());results[results.length] = {
'data': { text: text }, 'result': text};
});
return results;};
function formatItem(data) { return data.text;};
function formatResult(data) { return data.text;};
});
function getQuery() { var xmlTextString = '<location-service><request><locate-query territory="EGYPT"><criteria type="autocomplete"><address>44 Hillside Drive</address></criteria> <result maxrows="50"/> </locate-query> </request></location-service>'; return (xmlTextString)
}
function getMatches() { var xmlDoc = null; if (window.DOMParser) { try { if (netscape.security.PrivilegeManager.enablePrivilege)netscape.security.PrivilegeManager.enablePrivilege(
"UniversalBrowserRead");}
catch (e) {alert(
"Sorry, browser security settings won't let this program run."); return;}
parser =
new DOMParser();xmlDoc = parser.parseFromString(getQuery(),
"text/xml");}
else // Internet Explorer{
xmlDoc =
new ActiveXObject("Microsoft.XMLDOM");xmlDoc.async =
"false";xmlDoc.loadXML(getQuery());
}
var xmlhttp = new XMLHttpRequest();xmlhttp.open(
"POST", "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", true);xmlhttp.setRequestHeader(
"Content-Type", "text/xml");xmlhttp.onreadystatechange =
function () { if (xmlhttp.readyState == 4) { var y = callback(xmlhttp.responseText, xmlhttp.responseXML);alert(y);
};
}
xmlhttp.send(xmlDoc);
}
function callback(xml,xml1) {alert(
'Response from server: ' + xml); var y = xml1.getElementsByTagName("info")[0].getAttribute("text"); return(xml1)}
function parseXML(xml1) { var results = [];$(xml).find(
'location').each(function () {results[result.length] = xml1.getElementsByTagName(
"info").getAttribute("text");});
return results;};
</
script></
head></
html>
1