AutoComplete loading XML source Not Working
Hi all and thanks in advance!! Kinda of a Newbie with JavaScript... I had this script working on another server with another xml source but can seem to get this working. What I've done is added 2 more columns to my Data source (XML) as I'm wanting to use the same source on 3 pages just with slightly different outputs.
1. A jQuery search Suggest/Autocomplete
2. A jQuery A to Z list
3. A jQuery Department/Speciality list.
Ok the first problem seems to that my data source has 2 more sections in it and nothing seems to be reading on the Autocomplete?? I think the issue is in the finding the new rows...? Please Help.
XML Code:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<keywords xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<key>
<label>A to Z</label>
<url>emergency/search-a-z.htm</url>
</key>
<key>
<alpha>a</alpha>
<area>acute</area>
<label>Acute Medicine</label>
<url>emergency/acute-medicine.htm</url>
</key>
<key>
<alpha>a</alpha>
<area>acute</area>
<label>Acute Vertigo</label>
<url>emergency/acute-medicine.htm#acutevertigo</url>
</key>
<key/>
</keywords>
HTML Code:
<div id="gray">
<h2>Looking for something on the Emergency intranet....</h2>
<form name="s-search" action="">
<label for="searchBox">Keyword Search:</label>
<input name="query" type="text" id="searchBox" class="keysearch"/>
<input id="submitbut" type="submit" value="Submit »">
<a href="departments-a-z.htm">Or search using the A to Z list</a></form><br></div>
And the JavaScript:
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.compact.js"></script>
<script type="text/javascript">
var myArr = [];
$.ajax({
type: "GET",
url: "includes/keywords.xml", // change to full path of file on server also. The location for the Microsoft Excel file is at N:\Publishing\xml-data-backup/default-keywords-new.xls while in the development stage before live. Add the content to the Excel document in alphabetical order then export to xml.
dataType: "xml",
success: function(xml) {
$('key',xml).each(function() {
var row ={};
row.label = $(this).find("label").text();
row.url = $(this).find("url").text();
myArr.push(row);
})
},
complete: setupAC,
error: function() {
alert("XML File could not be found");
}
});
function setupAC() {
$("input#searchBox").autocomplete({
source: myArr,
minLength: 0,
select: function(event,ui){
$("input#searchBox").val(ui.item.label);
open(ui.item.url,'_self');
}
});
}
</script>
UPDATE: I've updated the format for easier reading (kindly mentioned by watusiware below) and also will add a NOTE that the version of jQuery is not by choice as I'm in a locked down environment and don't control that and they won't update. So I have to work with what I've got, but as mentioned I had this working on another departments site so in theory it should also work???