javascript - 2 つの異なる配列からオートコンプリートを使用してフォーム フィールドに入力しようとしています

Question

「何」と「エリア」の2つのフィールドを持つフォームがあります。各フィールドに1つずつ、2つの配列がある場合にオートコンプリートが機能しますが、2つの異なる配列からのデータを使用するには、最初のフィールド「what」が必要です。これは可能ですか？

//This works
<form........
<input name="what" id="what" type="text" size="45" />
<input name="area" id="area" type="text" size="45" />
......form/>

<script>
var tags = [ <?php do { ?>"<?php echo $row_rsCategories['category']; ?>",<?php } while ($row_rsCategories = mysql_fetch_assoc($rsCategories)); ?> ];
$( "#what" ).autocomplete({
source: function( request, response ) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( tags, function( item ){
return matcher.test( item );
}) );
}
});
</script>
<script>
var tags3 = [ <?php do { ?>"<?php echo $row_rsDirectory['suburb']; ?>, <?php echo $row_rsDirectory['postcode']; ?> ",<?php } while ($row_rsDirectory = mysql_fetch_assoc($rsDirectory)); ?> ];
$( "#area" ).autocomplete({
source: function( request, response ) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( tags3, function( item ){
return matcher.test( item );
}) );
}
});
</script>

//これは機能しません

<form........
<input name="what" id="what" type="text" size="45" />
<input name="area" id="area" type="text" size="45" />
......form/>

<script>
var tags = [ <?php do { ?>"<?php echo $row_rsCategories['category']; ?>",<?php } while ($row_rsCategories = mysql_fetch_assoc($rsCategories)); ?> ];
$( "#what" ).autocomplete({
source: function( request, response ) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( tags, function( item ){
return matcher.test( item );
}) );
}
});
</script>
<script>
var tags2 = [ <?php do { ?>"<?php echo $row_rsKeywords['keyword']; ?>",<?php } while ($row_rsKeywords = mysql_fetch_assoc($rsKeywords)); ?> ];
$( "#what" ).autocomplete({
source: function( request, response ) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( tags2, function( item ){
return matcher.test( item );
}) );
}
});
</script>
<script>
var tags3 = [ <?php do { ?>"<?php echo $row_rsDirectory['suburb']; ?>, <?php echo $row_rsDirectory['postcode']; ?> ",<?php } while ($row_rsDirectory = mysql_fetch_assoc($rsDirectory)); ?> ];
$( "#area" ).autocomplete({
source: function( request, response ) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( tags3, function( item ){
return matcher.test( item );
}) );
}
});
</script>

フォーム フィールド id="what" を class="what" に変更し、$( "#what" ) を $( ".what" ) に変更しようとしましたが、役に立ちませんでした。