推荐一个Jquery插件:autoComplete

最新推荐文章于 2024-12-08 16:57:16 发布

原创最新推荐文章于 2024-12-08 16:57:16 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#autocomplete #jquery插件 #stylesheet #function #google #c

Web 专栏收录该内容

49 篇文章

订阅专栏

本文介绍了一个简单的jQuery自动完成插件示例，该插件利用本地数据为输入框提供自动补全功能。通过加载必要的jQuery文件及插件，开发者可以轻松实现基于用户输入的建议列表。示例中使用了一串预先定义的字符串来模拟实际应用中的数据源。

类似于google搜索框的自动完成机制.

代码很简单, 以下就实现了一个以本地数据作为自动完成的演示

 
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
  <script>
  $(document).ready(function(){
    var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$("#example").autocomplete(data);
  });
  </script>
  
</head>
<body>
  API Reference: <input id="example" /> (try "C" or "E")
</body>
</html>

 