Allowing Auto Width to Search Result Dropdown

[github5775]

Thank you for this control. I noticed that the width of the search result dropdown was limited, and I needed to allow the user to see the complete results, so I removed the width setting. You may want to add this as an option.

Original:
this.dd.css({ top: pos.top + this.$el.outerHeight(), left: pos.left, width: this._$el.outerWidth() });

With Removed Width Setting: this.dd.css({ top: pos.top + this.$el.outerHeight(), left: pos.left });

[xcash]

Thanks @github5775 I'll keep this planned for a future release! :+1:

[dvd73]

Just hook the div inserting like that:

var styleChangedCallback = function (mutations) {
	var newWidth = mutations[0].target.style.width;
	if (newWidth !== '100%'){			
		$('.bootstrap-autocomplete.dropdown-menu').css('width', '100%');
	}
}
document.addEventListener("DOMNodeInserted", function(evt) {
if (evt.target.className === "bootstrap-autocomplete dropdown-menu"){
	var observer = new MutationObserver(styleChangedCallback);
	observer.observe(evt.target, {
		attributes: true,
		attributeFilter: ['style'],
	});
}
}, false);

[loic-bellinger]

The autocomplete.dd.shown event may also be used to bypass this, but that's hacky. For instance:

$(document).on('autocomplete.dd.shown', '#id_q', function(e){
    $('.bootstrap-autocomplete.dropdown-menu').css('width', 'calc(100% - 32px');
});

[CommittedSpin]

Used this as a work-around : .bootstrap-autocomplete.dropdown-menu{ width: auto !important; }