jQuery UI 为不同的表单元素合并了自动完成源

jQuery UI autocomplete source merged for different form element

我有一个包含多个文本输入的表单,并尝试使用 jQuery UI 让每个文本从不同的来源自动完成。问题是来源合并在一起。请看看我的代码,让我知道我做错了什么。

形式HTML:

<label>State: </label>
<input class='ac_state' name='state' type='text' />

<label>District: </label>
<input class='ac_district' name='district' type='text />

<label>Town: </label>
<input class='ac_town' name='town' type='text' />

每个输入的 javascript,全部在一页中,如下所示(我在这里只包括两个):

<script type='text/javascript'>
  $(function() {
    var availableTagsDistrict = <?php include('../inc/autocomplete_district.php'); ?>;
    $('.ac_district').autocomplete({
      source: availableTagsDistrict,
    });
  });
</script>

<script type='text/javascript'>
  $(function() {
    var availableTagsTown = <?php include('../inc/autocomplete_town.php'); ?>;
    $('.ac_town').autocomplete({
      source: availableTagsTown,
    });
  });
</script>

mysql 的结果以 json_encode 格式返回。地区的一个这样的例子:

require('../../inc/connect.php');

$query = "SELECT DISTINCT district FROM source";

$results = mysqli_query($cxn,$query);

if ($results->num_rows) {
    while ($row = mysqli_fetch_assoc($results)){

    $result[] = trim($row['district']);

    }
}

mysqli_close($cxn);

echo json_encode($result);

在此先感谢您的帮助。

我已经解决了,原来我的查询一直在添加到 $result[] 数组,然后将其发布到所有 javascript 中的 availableTags 中。真是个菜鸟