0

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"
  });
});

Working SPCascadeDropdowns functionality

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();
 });

Not working with jQuery autocomplete implementation

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();
 });

enter image description here

Thank you

2 Answers 2

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. enter image description here

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:

enter image description here

enter image description here

0

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

  1. I'm getting this error:

enter image description here

  1. 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

enter image description here enter image description here

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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.