Dynamically Populate Linked Datalists with jQuery - html

Question

I have multiple input datalist that will populate based on the input or selection in the previous datalist. It uses the jQuery load event to call a page with VBscript to pull the data from a SQL Server DB. Everything works fine until an input is enter that has spaces between the words, then the options are not loaded in the datalist.
I have tried using the encodeURIComponent(), but that does not resolve the issue. The call to the VBscript page seems to work fine in all cases. I have done the same thing with linked select tags and they work fine. The spaces seem to be the issue. Thanks in advance for the help.
Below is the code I am using.
JQuery Code:
$().ready(function() {
// Ajax code to get data to populate Group dropdown selection from Site selection
$("#Site").change(function() {
$("#Groups").load("scp_getListData.asp?WS=13&LV=1&ST=" + $("#Site").val());
});
// Ajax code to get data to populate Menu Name dropdown selection from Site & Group selection
$("#Group").change(function() {
$("#MenuNames").load("scp_getListData.asp?WS=13&LV=2&ST=" + $("#Site").val() + "&GP=" + $("#Group").val());
$('#MenuNamesLabel').text(event.target.id + " was changed?WS=13&LV=2&ST=" + $("#Site").val() + "&GP=" + $("#Group").val());
});
// Ajax code to get data to populate Level 1 Menu dropdown selection from Site, Group, Name selection
$("#MenuName").change(function() {
$("#Menu1Ops").load("scp_getListData.asp?WS=13&LV=3&ST=" + $("#Site").val() + "&GP=" + $("#Group").val() + "&MN=" + $("#MenuName").val());
$('#Menu1OpsLabel').text(event.target.id + " was changed?WS=13&LV=3&ST=" + $("#Site").val() + "&GP=" + $("#Group").val() + "&MN=" + $("#MenuName").val());
});
// Ajax code to get data to populate Level 3 Menu dropdown selection from Site, Group, Name, Level 1 selection
$("#Menu_1").change(function() {
$("#Menu2Ops").load("scp_getListData.asp?WS=13&LV=4&ST=" + $("#Site").val() + "&GP=" + $("#Group").val() + "&MN=" + $("#MenuName").val() + "&ML1=" + $("#Menu_1").val());
});
// Ajax code to get data to populate Level 1 Menu dropdown selection from Site, Group, Name, Level 1, Level 2 selection
$("#Menu_2").change(function() {
$("#Menu3Ops").load("scp_getListData.asp?WS=13&LV=5&ST=" + $("#Site").val() + "&GP=" + $("#Group").val() + "&MN=" + $("#MenuName").val() + "&ML1=" + $("#Menu_1").val() + "&ML2=" + $("#Menu_2").val());
});
});
HTML Code:
<form action="test_process.asp" class="valerror" name="MyForm" id="MyForm" method="post">
<table class="normal box" style="width: 750px; text-align:center" cellspacing="1" cellpadding="0" border="0">
<tr>
<td class="form_descr" style="width: 20%;">
<label for="Site">Site</label>
</td>
<td class="medium" style="text-align: left; padding: 3px 0px 3px 5px">
<select size="1" name="Site" id="Site" class="form_req" tabindex="1" required data-msg-required="The Site Field is Required!" onKeyDown="return tabCR(this,event);">
<option value="" selected="selected">Please Select</option>
</select>
</td>
</tr>
<tr>
<td class="form_descr" style="width: 20%;">
<label for="Group">Group Or Cell</label>
</td>
<td class="medium" style="text-align: left; padding: 3px 0px 3px 5px">
<input name="Group" id="Group" list="Groups" size="20" maxlength="20" class="form_req" tabindex="2" type="text" required data-msg-required="The Group Field is Required!" onKeyDown="return tabCR(this,event);">
<datalist id="Groups">
</datalist>
</td>
</tr>
<tr>
<td class="form_descr" style="width: 20%;">
<label for="MenuName">Menu Name</label>
</td>
<td class="medium" id="Email2" style="text-align: left; padding: 3px 0px 3px 5px;">
<input name="MenuName" id="MenuName" list="MenuNames" size="50" maxlength="50" class="form_req" tabindex="3" type="text" required data-msg-required="The Menu Name Field is Required!" onKeyDown="return tabCR(this,event);">
<datalist id="MenuNames">
</datalist>
<span id="MenuNamesLabel"></span>
</td>
</tr>
<tr>
<td class="form_descr" style="width: 20%;">
<label for="Menu_1">Level 1 Menu</label>
</td>
<td class="medium" style="text-align: left; padding: 3px 0px 3px 5px">
<input name="Menu_1" id="Menu_1" list="Menu1Ops" size="85" maxlength="150" class="form_req" tabindex="4" type="text" required data-msg-required="The Level 1 Menu Field is Required!" onKeyDown="return tabCR(this,event);">
<datalist id="Menu1Ops">
</datalist>
<span id="Menu1OpsLabel"></span>
</td>
</tr>
<tr>
<td class="form_descr" style="width: 20%;">
<label for="Menu_2">Level 2 Menu</label>
</td>
<td class="medium" style="text-align: left; padding: 3px 0px 3px 5px">
<input name="Menu_2" id="Menu_2" list="Menu2Ops" size="85" maxlength="150" class="form_fields" tabindex="5" type="text" onKeyDown="return tabCR(this,event);">
<datalist id="Menu2Ops">
</datalist>
</td>
</tr>
<tr>
<td class="form_descr" style="width: 20%;">
<label for="Menu_3">Level 3 Menu</label>
</td>
<td class="medium" style="text-align: left; padding: 3px 0px 3px 5px">
<input name="Menu_3" id="Menu_3" list="Menu3Ops" size="85" maxlength="150" class="form_fields" tabindex="6" type="text" onKeyDown="return tabCR(this,event);">
<datalist id="Menu3Ops">
</datalist>
</td>
</tr>
</table>
</form>