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>