We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Change autocomplete border color

Dear Syncfusion,

I want change autocomplete border color if the autocomplete value is not valid. How can I do?
This is my code:
if(typeof uniqueKey == 'undefined') {
//Change autocompletetextbox border
document.getElementById("garbagesType").style.borderColor = "red";
}
It dosen't work.

I hope you will help me as soon as possible.

5 Replies

SN Sasikala Nagarajan Syncfusion Team February 10, 2015 01:00 PM UTC

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.

Sample

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




KI Kovács István February 10, 2015 08:10 PM UTC

Thanks for your answer. I tied your code and i was glad because it worked but why can i see the autocombobox oroginal border when show the red border?
How can i change the background too?


SN Sasikala Nagarajan Syncfusion Team February 11, 2015 12:46 PM UTC

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.

Sample

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




KI Kovács István February 11, 2015 01:25 PM UTC

Thanks for your help. It works.


SN Sasikala Nagarajan Syncfusion Team February 12, 2015 05:49 AM UTC

Hi Kovács,

Thanks for the update,

Please let us know if you have further queries,

Regards,                                                                           

Sasikala Nagarajan



Loader.
Live Chat Icon For mobile
Up arrow icon