Change autocomplete border color

[Kovács István]

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.

[Sasikala Nagarajan]

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

[Kovács István]

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?

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

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

[Kovács István]

Thanks for your help. It works.

[Sasikala Nagarajan]

Hi Kovács,

Thanks for the update,

Please let us know if you have further queries,

Regards,                                                                           

Sasikala Nagarajan