Q:

multiple input field jquery.autocomplete

i want to make autocomplete for many text input field...
but with this autocomplete
<html><head><script type="text/javascript" src="jquery-1.4.js"></script>
<script type='text/javascript' src='jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<link rel="stylesheet" href="main.css" type="text/css" />

<script type="text/javascript">

$().ready(function() {
      $("#perkiraan").autocomplete("proses_akun.php", { width:350, max:28, scroll:false });
});

</script>
</head>
<body>
<div class="demo" style="width: 250px;">
<div>
<p>Nama Akun : <input type="text" id="perkiraan"  name="perkiraan" size="65"></p>
</div>
</div>
<div id="pilihan">
</div>

<div class="demo" style="width: 250px;"><div>
<p>Nama Akun : <input type="text" id="perkiraan"  name="perkiraan" size="65"></p>
</div>
</div>  

<div id="pilihan">
</div>
</body>
</html>

i know it because only one same name permit for this jquery...
but i want to add more input text (second, third, etc) below the first that using javascript too without copy paste the scriot and change its name...
help please,,,,

A:

Working demo http://jsfiddle.net/nckYT/
Please note DOM should never have the same id attributes for elements which is the case in the sample above. i.e. id="perkiraan" solution use class attribute instead.
I think the official doc says that if there are multiple same id then it takes the last id-ied element as the identified element.
further for mutiple element you can use class element for autocomplete like this $( ".perkiraan" ).autocomplete({ that will attach autocomplete with all the elements with class perkiraan. or you can chain the different ids like $( "#perkiraan, #foo" ).autocomplete({ but addaing class will do the trick
Hope this helps, lemme know if I missed anything, :)
cose
<body><div class="demo" style="width: 250px;">
    <div><p>Nama Akun : <input type="text" class="perkiraan"  name="perkiraan" size="65"></p></div></div><div id="pilihan"></div>
    <div class="demo" style="width: 250px;">
<div><p>Nama Akun : <input type="text" class="perkiraan"  name="perkiraan" size="65"></p></div></div>  <div id="pilihan"></div></body>

Image 1 input 1

Image 2 input 2

