如何为搜索栏添加jQuery自动提示？排查实现失败与阻塞问题

先看你代码里的几个明显问题，这些是导致功能失效的核心原因：

1. 资源引入方式完全错误 #

你在<head>里的资源引入写法完全不对：

• JS文件必须通过 <script src="文件路径"></script> 的方式引入，不能直接把路径写在<script>标签内容里
• CSS文件不能用<script>标签加载，必须用 <link rel="stylesheet" href="文件路径"> 标签

2. 依赖加载顺序错误 #

autoComplete插件依赖jQuery才能运行，所以必须先加载jQuery核心库，再加载插件文件。你现在是先引入了插件，后加载jQuery，插件初始化时找不到jQuery环境，自然无法正常工作。

3. 重复引入插件文件 #

你同时引入了jquery.auto-complete.min.js和jquery.auto-complete.js，这两个是同一个插件的压缩版和未压缩版，只需要保留其中一个即可，重复引入可能引发不必要的冲突。

修正后的完整代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Testsite</title>
 <!-- 先加载插件的CSS样式 -->
 <link rel="stylesheet" href="jQuery-autoComplete-master/jquery.auto-complete.css">
 <!-- 先加载jQuery核心库 -->
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <!-- 再加载autoComplete插件 -->
 <script src="jQuery-autoComplete-master/jquery.auto-complete.min.js"></script>
 <!-- 可选：如果不需要jQuery UI的其他功能，建议移除它，避免方法名冲突 -->
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 <div>
  <h1>Search field</h1>
  <input id="search" style="width: 500px; height: 50px;font-size:18pt;" placeholder="ActionScript or AppleScript"><br>
  <div id="results"></div>
  <p></p>
  <!-- 把自动提示初始化代码放在这里 -->
  <script>
  $(function(){
   $('#search').autoComplete({
    minChars: 2,
    source: function(term, suggest){
     term = term.toLowerCase();
     var choices = ['ActionScript', 'AppleScript', 'Asp', 'BASIC', 'C', 'C++', 'Clojure', 'COBOL', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'Python', 'Ruby', 'Scala', 'Scheme'];
     var matches = [];
     for (var i=0; i<choices.length; i++)
      if (~choices[i].toLowerCase().indexOf(term)) matches.push(choices[i]);
     suggest(matches);
    }
   });
  });
  </script>
 </div>
</body>
</html>

关于真实站点的阻塞/冲突问题 #

如果在独立站点能正常运行，但真实站点不行，大概率是以下原因：

• jQuery版本冲突：真实站点可能引入了多个版本的jQuery，或者版本与插件不兼容。可以尝试用jQuery.noConflict()隔离不同版本，或者统一站点的jQuery版本。
• 插件方法名冲突：你引入的jQuery UI里也有autocomplete方法（注意是小写c），和第三方插件的autoComplete（大写C）可能存在隐性冲突。如果不需要jQuery UI的其他功能，直接移除它；如果必须保留，可以给第三方插件的方法重命名。
• 资源加载失败：按F12打开开发者工具，查看控制台是否有404错误，确认插件的CSS/JS文件路径在真实站点下是否正确。
• DOM元素被修改：真实站点可能有其他JS代码动态修改了#search元素，导致插件无法绑定成功。可以在初始化代码前加console.log($('#search').length)，确认元素是否能被正确找到。

先修正前面的基础错误，再按上面的思路排查真实站点的冲突问题，应该就能解决你的问题了。

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