如何在我的 html 网页中使用 jquery 自动完成功能？答案

【问题标题】：How to use jquery autocomplete in my web page in html?如何在我的 html 网页中使用 jquery 自动完成功能？
【发布时间】：2015-06-09 06:19:01
【问题描述】：

我有在线搜索引擎自动完成的源代码。

这些是文件，

这里是 style.css：

.autocomplete-w1 { background:url(img/shadow.png) no-repeat bottom right; position:absolute; top:0px; left:0px; margin:8px 0 0 6px; /* IE6 fix: */ _background:none; _margin:0; }
.autocomplete { border:1px solid #999; background:#FFF; cursor:default; text-align:left; max-height:350px; overflow:auto; margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px;  _margin:0; _overflow-x:hidden; }
.autocomplete .selected { background:#F0F0F0; }
.autocomplete div { padding:2px 5px; white-space:nowrap; }
.autocomplete strong { font-weight:normal; color:#3399FF; }

这是我的链接http://jsfiddle.net/xwm390o5/2/

但是我的页面不工作，

我无法理解如何在我的网页中使用这些自动完成的 js 文件。

谁能帮帮我？提前致谢。

【问题讨论】：

不包含 JS 文件，用于初始化自动完成的选择器错误。
并且输入标签未关闭
@ShaunakD 我有一个 js 文件，我没有 js 链接.. 请问，如何添加链接？谢谢
JSFiddle 缺少任何外部 JQuery 和 JQuery UI 脚本文件
好吧，也许在做某事之前，您应该了解所有这些工作原理的“基础知识”？如果您不知道如何包含脚本以及它们是如何工作的，那么是时候学习这一点了。有大量的书籍、在线指南、研讨会等。

标签： javascript jquery html css autocomplete

【解决方案1】：

您需要将自动完成直接添加到输入元素。

<input id="autocompleteInput" type='text' name='country' value='' class='auto'/>

$( "#autocompleteInput" ).autocomplete({

fiddle

【讨论】：

谢谢，但是我从这个链接devbridge.com/sourcery/components/jquery-autocomplete 得到了一个源代码，当我输入任何字母时，那个特定的字母会被着色吗？.. 但在你的没有着色，请你帮忙我？谢谢

【解决方案2】：

非 JS 解决方案：如果您使用的是 HTML5，那么您可以在文本框中使用 HTML 列表属性并在选项中添加标签数据列表。

<p><label>Tutorial:</label><input type='text' list="availableTutorials" id="automplete" name='country' value='' class='auto'></p>
  <datalist id="availableTutorials">
      <option value="ActionScript">
      <option value="Boostrap">
      <option value="Google Chrome">
      <option value="c">
      <option value="c++">
</datalist>

Fiddle

【讨论】：