multiple input field jquery.autocomplete

Question

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

means you want to trigger same event ie autocomplete for other textbox — Tamkeen
– Tamkeen, Commented Jun 29, 2012 at 5:08
it may help you link here stackoverflow.com/questions/3102826/jquery-selectors — Tamkeen
– Tamkeen, Commented Jun 29, 2012 at 5:12

Tats_innit · Accepted Answer · 2012-06-29 05:18:47Z

4

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 enter image description here

Image 2 input 2 enter image description here

edited Jun 29, 2012 at 5:18

answered Jun 29, 2012 at 5:07

Tats_innit

34.1k10 gold badges74 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Myan Over a year ago

but it same, still only 1 textfield that can use autocomplete,the second,etc cannot use it...

Tats_innit Over a year ago

@Myan nopes see the demo jsfiddle.net/nckYT type 1 on both the text boxes and you will see autocomplete working for both, I have attached images as well to show you that, also if I may recommend please read HTML docs and Jquery docs, but above working demo should help :)

Myan Over a year ago

but it same, still only 1 textfield that can use autocomplete,the second,etc cannot use it...

<script type="text/javascript"> $().ready(function() {$(".id_perkiraan").autocomplete("j query/js/cari.php",{width:350, max:28, scroll:false });});         </script>

<div class="demo" > 		   <div><p><input type="text" name="id_perkiraan[]" class="id_perkiraan" size=75 autocomplete="off"> 		   </p></div> 		   </div> 		     <div class="pilihan"></div>

Tats_innit Over a year ago

It is problem with your HTML then, also I can only see one text box in your code <input type="text" name="id_perkiraan[]" class="id_perkiraan" size=75 autocomplete="off"> Also Json has nothing to do with your question, its just the data feed, check your php file as well. Can you please recreate your issue in jsfiddle and I might help you out, p.s. hope your path is correct "j query/js/cari.php"

Myan Over a year ago

here is my php:

$q = strtolower($_GET["q"]); if (!$q) return; 	$query = mysql_query("select * from perkiraan where id_perkiraan LIKE '%$q%'"); 	while($r = mysql_fetch_array($query))  	{$id = $r['id_perkiraan']; 	$nama = $r['nama']; 	echo "$id [$nama] \n"; 	}

and javascript like this ` $().ready(function(){$( ".id_perkiraan" ).autocomplete({ source: function( req, resp ) {$( "j query/js/cari.php", { delay: 1}, function(data) {resp( data ); }, "JSON" );}});});` and still not work...

|

Zuber Surya · Accepted Answer · 2012-06-29 05:33:33Z

0

Its simple just change $("#perkiraan").autocomplete to $(".classname").autocomplete and you are done

Note : class name should be same in all text fields

answered Jun 29, 2012 at 5:33

Zuber Surya

8697 silver badges17 bronze badges

Collectives™ on Stack Overflow

multiple input field jquery.autocomplete

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related