Autocomplete with same ID

[Lory]

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>

                      <div id="partialView2">                                                

                        <input type="text" id="selectCar" />

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <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,

              });

        });

    </script>

[Selvamani Sankarappan]

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:   

 

http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme    

https://www.w3.org/TR/html4/struct/global.html#adef-id    

 

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.   

  

Regards,   

Selvamani S