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. (Last updated on : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Change autocomplete border color

Thread ID:

Created:

Updated:

Platform:

Replies:

118171 Feb 7,2015 09:33 PM UTC Feb 12,2015 05:49 AM UTC JavaScript 5
loading
Tags: ejAutoCompleteTextBox
Kovács István
Asked On February 7, 2015 09:33 PM UTC

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 [Syncfusion]
Replied On 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



Kovács István
Replied On 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?

Sasikala Nagarajan [Syncfusion]
Replied On 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



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

Thanks for your help. It works.

Sasikala Nagarajan [Syncfusion]
Replied On 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



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;