Jquery UI appendTo 失效：搜索框autocomplete在input元素下无法工作求助

嘿，我之前也碰到过类似的情况，jQuery UI的Autocomplete本来就是为input文本框设计的，div能跑反而属于“意外情况”，所以咱们得先把input的配置捋顺。

先给你一个绝对能跑的基础示例，你可以对照着检查自己的代码：

<!-- 注意引入顺序：先jQuery，再jQuery UI的样式和脚本 -->
<script src="jquery.min.js"></script>
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="jquery-ui.min.js"></script>

<!-- 你的input元素，确保type是text或search -->
<input type="text" id="inputs" placeholder="输入关键词试试">

<script>
// 一定要等DOM加载完成再初始化
$(function() {
  // 模拟你的数据源，可以换成接口请求
  var searchKeywords = [
    "JavaScript",
    "jQuery UI",
    "Autocomplete",
    "前端开发",
    "调试技巧"
  ];

  // 针对input#inputs初始化Autocomplete
  $("#inputs").autocomplete({
    source: searchKeywords,
    minLength: 1 // 输入1个字符就触发补全
  });
});
</script>

接下来咱们排查你代码里可能出问题的地方：

• 拼写或重复ID：检查你的input元素id是不是真的是inputs，有没有和页面上其他元素重复ID？浏览器里重复ID会导致选择器失效。
• 引入顺序错误：必须先引入jQuery，再引入jQuery UI的JS和CSS，顺序反了直接歇菜。
• DOM加载时机：初始化代码一定要放在$(function(){...})里面，或者放在body标签的最后，不然input元素还没渲染出来，JS找不到元素自然初始化失败。
• 动态生成的input：如果你的input是通过JS动态添加到页面的，那要等元素生成后再调用autocomplete()方法，不能在页面加载时就初始化（那时候元素还不存在）。
• 浏览器控制台报错：按F12打开控制台，看看有没有404（找不到jQuery或UI文件）、语法错误这类提示，这些是最直接的问题线索。
• input类型问题：如果你的input是type="hidden"或者其他非文本类型，Autocomplete肯定不会工作，要改成type="text"或type="search"。

另外，如果你的项目里还有其他JS库（比如Prototype）和jQuery冲突，可以把$换成jQuery试试，比如：

jQuery("#inputs").autocomplete({
  source: searchKeywords
});

按照上面的步骤排查，应该就能搞定input上的Autocomplete失效问题了，毕竟这才是这个插件的标准用法~

内容的提问来源于stack exchange，提问作者notsure