如何在我的html网页中使用jquery自动完成

How to use jquery autocomplete in my web page in html?

本文关键字：jquery 我的 html 网页      更新时间：2023-09-26

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

这些是文件，

这是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文件。

有人能帮我吗？提前谢谢。

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

<input id="autocompleteInput" type='text' name='country' value='' class='auto'/>
$( "#autocompleteInput" ).autocomplete({

小提琴

非JS解决方案：如果您使用HTML5，那么您可以在文本框中使用HTML列表属性，并标记datalist作为选项。

<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

相关文章：