[jQuery] (autocomplete) multiple inputbox using same autocomplete function
code at the bottom is working fine .. wherein data is coming from
database via postcode.php in following format :
2221|BLAKEHURST|NSW
4401|ACKLAND|QLD
2221|BLAKEHURST|NSW
4401|ACKLAND|QLD
2221|BLAKEHURST|NSW
4401|ACKLAND|QLD
Now issue is I have multiple postalcode, city and state input box in
my code in same page like :
<input type="text" id="postalcode" />
<input type="text" id="city" />
<input type="text" id="state" />
<input type="text" id="postalcodex" />
<input type="text" id="cityx" />
<input type="text" id="statex" />
<input type="text" id="postalcodey" />
<input type="text" id="cityy" />
<input type="text" id="statey" />
How should I go in this case ??
I just don't want to repeat the javascript code for them. Is there any
way I can pass variable seelctors and can get back result in same
way ?
-------------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/
plugins/autocomplete/demo/main.css" type="text/css" />
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/
plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/
plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/
plugins/autocomplete/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></
script>
<script>
$(document).ready(function(){
$("#postalcode").autocomplete("inc/postcode.php", {
width: 260,
selectFirst: false,
formatItem: function(data, i, n, value) {
return data[0] + "," + data[1] + "," + data[2];
}
});
$("#postalcode").result(function(event, data, formatted) {
if (data)
{
$("input#postalcode").val(data[0]);
$("input#city").val(data[1]);
$("input#state").val(data[2]);
}
});
});
</script>
</head>
<body>
<input type="text" id="postalcode" />
<input type="text" id="city" />
<input type="text" id="state" />
</body>
</html>