BoldSignA modern eSignature application with affordable pricing. Sign up today for unlimited document usage!
Hi Kovács,
Thanks for using Syncfusion products,
We have analyzed your requirement (adding border to autocomplete for invalid key). There is no inbuilt option to achieve this requirement. For your convenience we have prepared the sample by overriding our autocomplete function. In this we have add the new class(“invalid”) for invalid text in textbox and also remove that class for valid text.
Please find the below code snippet
<script> // Define this event before Autocomplete initialization var click = ej.Autocomplete.prototype._doneRemaining; ej.Autocomplete.prototype._doneRemaining = function (e) { // {handle the custom event or method here} this.suggestionListItems.length < 1 ? this.element.parents(".e-widget").addClass("invalid") : this.element.parents(".e-widget").removeClass("invalid"); // if you want the original method to be executed call the Autocomplete original method click.call(this, e); } </script> |
[script]
function change(args) { /*To remove the border when we delete all text in autocomplete textbox(using backspace key)*/
if (args.value == "") this.element.parents(".e-widget").removeClass("invalid"); } |
<style> .invalid { border:1px solid red; } </style> |
Please find the sample from below location.
Please check with the given sample and let us know whether it meets your requirement. If we have misunderstood your requirement, please provide more details on the requirement and that will be helpful for us to provide the prompt solution.
Please let us know if you have further queries,
Regards,
Sasikala Nagarajan
Hi Kovács,
Thanks for the update,
Why can i see the autocombobox original border
We have analyzed your requirement (remove original border of autocomplete for invalid key) and achieved this by modifying the code which is given in previous response. Please refer the modified code from below code snippet
<script> // Define this event before Autocomplete initialization var click = ej.Autocomplete.prototype._doneRemaining; ej.Autocomplete.prototype._doneRemaining = function (e) { // {handle the custom event or method here} this.suggestionListItems.length < 1 ? this.element.parents(".e-in-wrap").addClass("invalid") : this.element.parents(".e-in-wrap").removeClass("invalid"); // if you want the original method to be executed call the Autocomplete original method click.call(this, e); } </script> |
[script] function change(args) { /*To remove the border when we delete all text in autocomplete textbox(using backspace key)*/ if (args.value == "") this.element.parents(".e-in-wrap").removeClass("invalid"); } |
<style> .invalid { border:1px solid red !important; } </style> |
How can i change the background too?
We can change the background color of autocomplete using the class “invalid” itself which is added to change the border color of autocomplete for invalid key. Please refer the below code snippet to change the background color of autocomplete.
[style] .invalid .e-input background-color:lightGray !important; |
Please find the sample from below location.
Please check with the given sample and let us know whether it meets your requirement. If we have misunderstood your requirement, please provide more details on the requirement and that will be helpful for us to provide the prompt solution.
Please let us know if you have further queries,
Regards,
Sasikala Nagarajan
Hi Kovács,
Thanks for the update,
Please let us know if you have further queries,
Regards,
Sasikala Nagarajan