Autocomplete value renders as Dictionary String instead of Text Value when Creating New Folder (SPO 2013)

Question

I've created a 'Create a New Folder' button, with (2) text input fields.

• <#txtCompanyId> is an autocomplete text field
• <#txtFolderName> is a free-text field
• <"#btnSubmit> is the submit button

The user is required to (1) Name the folder, (2) associate it with a company, and (3) press 'Create Folder' button. When testing this, the folder is created successfully, the 'Name' populates correctly, BUT the the 'CompanyId' input filed does NOT render text, instead, its renders the following:

System.Collections.Generic.Dictionary`2[System.String,System.Object]

Below is the script I'm using, followed by some screenshots. I'm stumped, so any insight would be unbelievably helpful. thanks!

<div>
<span>Name Your Folder Below</span><br/> 
<input type="text" id="txtFolderName" placeholder="Name the Folder..."/>
<input type="text" id="txtCompanyId" placeholder="Add a Company..."/ />
<input type="button" id="btnSubmit" value="Create Folder" 
onClick="window.location.href=window.location.href;"/> 
</div>
<div id="divResults"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function () {
bindButtonClick();
});
function bindButtonClick() {
$("#btnSubmit").on("click", function () {
    createFolder();
});
}
function createFolder() {
var folderName = $("#txtFolderName").val();
var clientContext = new SP.ClientContext();
var oWebsite = clientContext.get_web();
var oList = oWebsite.get_lists().getByTitle("SourcesLibrary");
var folderCreateInfo = new SP.ListItemCreationInformation();
folderCreateInfo.set_underlyingObjectType(SP.FileSystemObjectType.folder);
folderCreateInfo.set_leafName(folderName);
var companyId = $("#txtCompanyId").val($.cookie(companyTag));
this.oListItem = oList.addItem(folderCreateInfo);
this.oListItem.set_item("CompanyId", companyId);
this.oListItem.update();
clientContext.load(oList);
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed)
);
}
function onQuerySucceeded() {
$("#divResults").html("Folder successfully created!");
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() +
'\n' + args.get_stackTrace());
}
</script>

<script type="text/javascript">
$(document).ready(function()
{   
var soapEnv = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'><soapenv:Body> <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'><listName>Companies</listName><viewFields><ViewFields><FieldRef Name='Title' /> </ViewFields></viewFields> </GetListItems> </soapenv:Body> </soapenv:Envelope>";
//Make a call to the List WebService using the SOAP envelope described above.
//The URL is fixed to a Specific Site Root.  Feel free to change this
//to your own fixed root or do some jscript voodoo to figure out where
//Of course in 2010 you can do this with the Client Object Model, or hit
//the list rest Service and return json, so enabling jsonp cross site calls.
$.ajax({
    url: "https://MYSITENAME.sharepoint.com/_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: soapEnv, 
contentType: "text/xml; charset=\"utf-8\"",
success:  function( xmlResponse )         { 
var domElementArray=$( "z\\:row", xmlResponse ); 
var dataMap = domElementArray.map(function() 
{     
return { 
value: $(this).attr('ows_Title') , 
id: $(this).attr('ows_Title') 
}; 
});  
        var data = dataMap.get(); 

        //Find the Sharepoint Portal Search Box (this is a poor selector, but it is not properly named by sharepoint, well it is but INamingContainer gets in the way)    
       $( "#txtCompanyId" ).autocomplete(    
        {                 source: data  
        });
        }     
        });//.ajax   
         });//docReady 
  </script>

Screenshots

1. The Initial, Blank 'Create New Folder' Form
2. Creating and Naming a New Folder
3. THE ISSUE...The autopopulated value in the RED box should be a text value

Answer 1

This is far from a complete answer as I have no way to test it given all of the jquery plugins you are using (cookie and autocomplete), but I'm thinking the culprit is this line:

var companyId = $("#txtCompanyId").val($.cookie(companyTag));

companyId in the above statement ends up evaluating to an object, because you are setting .val() with $.cookie(companyTag). I'm not sure what the intent is behind that.

Try changing it to this line, then testing the result:

var companyId = $("#txtCompanyId").val();

This should return the value of the txtCompanyId input. From here, though, I'm not really sure what that value is going to be, since you're teeing it up in autocomplete. You might need to debug it in developer tools to see what you get.