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

Autocomplete with same ID

Hi Team,

I have a project in MVC platform that makes use of the same partial view for a form but with different functionalities. I'm having a problem showing the options of selectCar in partialView1 but it shows in partialView2. How do I resolve this without having to create the same form just different ids? Thanks
<div class="content-container-fluid">
        <div class="row">
            <div class="cols-sample-area">
                <div class="frame">
                    <div class="control">
                      <div id="partialView1">                      
                      <input type="text" id="selectCar" />
                      <div id="partialView2">                                                
                        <input type="text" id="selectCar" />
    <script type="text/javascript" class="jsScript">
        $(function () {
            // declaration
            var carList = [
                "Audi S6", "Austin-Healey", "Alfa Romeo", "Aston Martin",
                "BMW 7", "Bentley Mulsanne", "Bugatti Veyron",
                "Chevrolet Camaro", "Cadillac",
                "Duesenberg J", "Dodge Sprinter",
                "Elantra", "Excavator",
                "Ford Boss 302", "Ferrari 360", "Ford Thunderbird",
                "GAZ Siber",
                "Honda S2000", "Hyundai Santro",
                "Isuzu Swift", "Infiniti Skyline",
                "Jaguar XJS",
                "Kia Sedona EX", "Koenigsegg Agera",
                "Lotus Esprit", "Lamborghini Diablo",
                "Mercedes-Benz", "Mercury Coupe", "Maruti Alto 800",
                "Nissan Qashqai",
                "Oldsmobile S98", "Opel Superboss",
                "Porsche 356", "Pontiac Sunbird",
                "Scion SRS/SC/SD", "Saab Sportcombi", "Subaru Sambar", "Suzuki Swift",
                "Triumph Spitfire", "Toyota 2000GT",
                "Volvo P1800", "Volkswagen Shirako"

            $('#div1 #selectCar').ejAutocomplete({
                width: "100%",
                watermarkText: "Select a car",
                dataSource: carList,
              showPopupButton: true,
            $('#div2 #selectCar').ejAutocomplete({
                  width: "100%",
                  watermarkText: "Select a car",
                  dataSource: carList,
                  showPopupButton: true,

1 Reply

SS Selvamani Sankarappan Syncfusion Team August 31, 2016 10:41 AM UTC

Hi Lory,   
Thanks for Contacting Syncfusion Support,   
We had checked your code example. As per the HTML standard, we should not use the same id for multiple elements in a page. Please refer the following link:   
We can render the multiple controls using the class name instead of id. But it will not work in our Autocomplete control. So, we considered this as a bug and this issue fix will be included in our Volume 3, 2016 release.   
Selvamani S   

Live Chat Icon For mobile
Up arrow icon