小白求助， JQuery 的 autocomplete 问题

想实现的功能：根据 select 的值，另一个 input 提供相应的 availableTags 来提示输入。比如 select 选择北京，那 input 就提供北京相关的 availableTags

没接触过前端，目前探索到这里，应付下作业：

使用 Jquery 的 autocomplete 。点击按钮，想实现 availableTags2 里的提示，但是没反应（是不是生成 html 的时候 id 就固定了？）。

请问该如何修改？


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 自动完成（ Autocomplete ） - 默认功能</title>
  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="jqueryui/style.css">
  <script>
  $(function() {
    var availableTags1 = ["ActionScript","AppleScript","Asp"];
	var availableTags2 = ["Basic","Basketball", "Banana" ];
    $( "#availableTags1" ).autocomplete({
      source: availableTags1
    });
    $( "#availableTags2" ).autocomplete({
      source: availableTags2
    });
  });
  </script>
</head>
<body>
 
 <input id="availableTags1"><button type="button" onclick="myFunction0()"> 使用 tags2 </button> 
<script>
function myFunction0()
{
    document.getElementById("availableTags1").id= "availableTags2"
};
</script>
 
 
</body>
</html>

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/776752