jQuery .combobox() breaks SPCascadeDropdowns relationship

Question

I've implemented SPCascadeDropdowns functionality on SharePoint Online into my new item form. That's ok and it works.

$(document).ready(function(){
  $().SPServices.SPCascadeDropdowns({
      relationshipList: "CostCenter",
      relationshipListParentColumn: "Company",
      relationshipListChildColumn: "Title",
      parentColumn: "Company",
      childColumn: "CostCenter"
  });
});

However because plenty of Companies and Cost Centers I want to implement autocomplete functionality like jQuery autocomplete combobox is.

The autocomplete works fine but problem is when I do that it will break relationship between those two input fields. So I can pick up values from Company but not from CostCenter because it's always empty.

 $(document).ready(function(){
  $().SPServices.SPCascadeDropdowns({
      relationshipList: "CostCenter",
      relationshipListParentColumn: "Company",
      relationshipListChildColumn: "Title",
      parentColumn: "Company",
      childColumn: "CostCenter"
  });
 });

 $(document).ready(function(){
     $("select[title='Company']").combobox();
     $("select[title='CostCenter']").combobox();
 });

Thank you for your helpful hints. It will be probably connected with my poor javascript knowledge.

Update: When I apply this jQuery autocomplete only on second input it works fine.

 $(document).ready(function(){
  $().SPServices.SPCascadeDropdowns({
      relationshipList: "CostCenter",
      relationshipListParentColumn: "Company",
      relationshipListChildColumn: "Title",
      parentColumn: "Company",
      childColumn: "CostCenter"
  });
 });

 $(document).ready(function(){
    $("select[title='CostCenter']").combobox();
 });

Thank you

Answer 1

Per my testing, this issue is caused by the change event in .SPServices.SPCascadeDropdowns will not be triggered because the selected option value is not changed.

To resolve this, we need to overwrite the autocomplete source code and cascading function.

Custom cascading function -- refer to:

http://www.markrackley.net/2014/05/20/cascading-drop-down-lists-in-sharepoint-office-365-using-rest/

Also call the cascading function in this._on method within autocomplete function. After that, when the parent value is changed, the child values will be changed.

Demo:

<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css"/>

<style>
.custom-combobox {
position: relative;
display: inline-block;
}
.custom-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
}
.custom-combobox-input {
margin: 0;
padding: 5px 10px;
}
</style>

<script type="text/javascript">
$(document).ready(function(){
  HillbillyCascade({
    parentFormField: "Company", //Display name on form of field from parent list
    childList: "CostCenter", //List name of child list
    childLookupField: "Title", //Internal field name in Child List used in lookup
    childFormField: "CostCenter", //Display name on form of the child field
    parentFieldInChildList: "Company" //Internal field name in Child List of the parent field
  });

  (function( $ ) {
$.widget( "custom.combobox", {
_create: function() {
this.wrapper = $( "<span>" )
.addClass( "custom-combobox" )
.insertAfter( this.element );

this.element.hide();
this._createAutocomplete();
this._createShowAllButton();
},

_createAutocomplete: function() {
var selected = this.element.children( ":selected" ),
value = selected.val() ? selected.text() : "";
this.input = $( "<input>" )
.appendTo( this.wrapper )
.val( value )
.attr( "title", "" )
.addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
.autocomplete({
delay: 0,
minLength: 0,
source: $.proxy( this, "_source" )
})
.tooltip({
tooltipClass: "ui-state-highlight"
});

this._on( this.input, {
autocompleteselect: function( event, ui ) {
ui.item.option.selected = true;
this._trigger( "select", event, {
item: ui.item.option
});
// trigger cascading here when result is changed
DoHillbillyCascade(ui.item.option.value,{
    parentFormField: "Company", //Display name on form of field from parent list
    childList: "CostCenter", //List name of child list
    childLookupField: "Title", //Internal field name in Child List used in lookup
    childFormField: "CostCenter", //Display name on form of the child field
    parentFieldInChildList: "Company" //Internal field name in Child List of the parent field
  }); 
},

autocompletechange: "_removeIfInvalid"
});
},

_createShowAllButton: function() {
var input = this.input,
wasOpen = false;

$( "<a>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.tooltip()
.appendTo( this.wrapper )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass( "ui-corner-all" )
.addClass( "custom-combobox-toggle ui-corner-right" )
.mousedown(function() {
wasOpen = input.autocomplete( "widget" ).is( ":visible" );
})
.click(function() {
input.focus();

// Close if already visible
if ( wasOpen ) {
return;
}

// Pass empty string as value to search for, displaying all results
input.autocomplete( "search", "" );
});
},

_source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
response( this.element.children( "option" ).map(function() {
var text = $( this ).text();
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
label: text,
value: text,
option: this
};
}) );
},

_removeIfInvalid: function( event, ui ) {

// Selected an item, nothing to do
if ( ui.item ) {
return;
}

// Search for a match (case-insensitive)
var value = this.input.val(),
valueLowerCase = value.toLowerCase(),
valid = false;
this.element.children( "option" ).each(function() {
if ( $( this ).text().toLowerCase() === valueLowerCase ) {
this.selected = valid = true;
return false;
}
});

// Found a match, nothing to do
if ( valid ) {
return;
}

// Remove invalid value
this.input
.val( "" )
.attr( "title", value + " didn't match any item" )
.tooltip( "open" );
this.element.val( "" );
this._delay(function() {
this.input.tooltip( "close" ).attr( "title", "" );
}, 2500 );
this.input.autocomplete( "instance" ).term = "";
},

_destroy: function() {
this.wrapper.remove();
this.element.show();
}
});
})( jQuery );
    $("select[title='Company']").combobox();
    $("select[title='CostCenter']").combobox();

//  $("select[title='Company']").parent().find("input").change(function(){alert("work");});
function HillbillyCascade(params)
    {

        var parent = $("select[Title='"+params.parentFormField+"'], select[Title='"+
            params.parentFormField+" Required Field']");

        var currentParent = $(parent).val();       
            DoHillbillyCascade(currentParent,params);
    }


    function DoHillbillyCascade(parentID,params)
    {

        var child = $("select[Title='"+params.childFormField+"'], select[Title='"+
            params.childFormField+" Required Field']," +
           "select[Title='"+params.childFormField+" possible values']");

        $(child).empty();

        var options = "";

        var call = $.ajax({
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('"+params.childList+
                "')/items?$select=Id,"+params.childLookupField+","+params.parentFieldInChildList+
                "/Id&$expand="+params.parentFieldInChildList+"/Id&$filter="+params.parentFieldInChildList+
                "/Id eq "+ parentID,
            type: "GET",
            dataType: "json",
            headers: {
                Accept: "application/json;odata=verbose"
            }

        });
        call.done(function (data,textStatus, jqXHR){

            for (index in data.d.results)
            {
                options += "<option value='"+ data.d.results[index].Id +"'>"+
                    data.d.results[index][params.childLookupField]+"</option>";
            }
            $(child).append(options);

        });
        call.fail(function (jqXHR,textStatus,errorThrown){
            alert("Error retrieving information from list: " + params.childList + jqXHR.responseText);
            $(child).append(options);
        });

    }

    });

</script>

Result:

Answer 2

thank you very much for your answer. However, I have two problem with this:

1. I'm getting this error:

2. The cascade selection now works "fine", but only once. When I select parent Company then it correctly offer CostCenters but then when I click againg on that arrow it will offer me something different. Plus when I try to save the item the CostCenter column is empty

I'm using two tables:

Companies with column CompanyName(Title), ComapnyCode CostCenter with columns CostCenter(Tilte), CostCenterCode, Company(lookup from the Companies)

That's correct right?