Hello Michael,

After investigating this further, I determined that your requirement could be achieved by binding a method to the ValueChanging event. In this method it is checked whether any of the items starts with the pasted value, if no, the event is canceled. Otherwise, the new item is selected:

function paste(sender, args) {          

            var itemContains = false;

            for (let i = 0; i < sender.get_items().get_length(); i++) {

                var itemVal = sender.get_items().get_item(i).get_element().textContent;

                if (!sender._currentEvent || itemVal.startsWith(sender._currentEvent.target.value))

                    itemContains = true;

            }

            if (!itemContains)

                args._cancel = true;

        }

Regarding setting clear icon in the input field of the WebDropDown, a method is bound to the Initialize and ValueChanged event, where an image is appended to the input. On click of this image the selected item is unselected and the value of the input is cleared.

function setButton(sender, args) {

            var deleteButton = $(document.getElementById("del"))[0];

            sender._element.childNodes[1].childNodes[2].childNodes[1].childNodes[1].childNodes[1].style = "display:flex; width:300px";

            sender._element.childNodes[1].childNodes[2].childNodes[1].childNodes[1].childNodes[1].appendChild(deleteButton);

        }

Below I am attaching a sample, demonstrating the described behavior. Please test it on your side and let me know if you need any further information regarding this matter.

Regards,
Monika Kirkova,
Infragistics

WebDropDownPasteValue.zip