搜索框中自动完成(Autocomplete)的jquery插件实现示例

学习笔记 马富天 2016-06-14 09:41:53 85 0

【摘要】在很多的网站中,搜索是一个必备的功能,在京东、淘宝需要搜索商品,当我们输入第一个字的时候会在相应的搜索栏下面给出我们可能想要输入的内容,本文介绍一下通过jQuery UI的自动完成插件实现该功能。

准备工作:下载jquery-ui的css、js文件和jquery文件

jquery-ui的下载地址:

http://jqueryui.com/download/all/

jquery的下载地址:

http://jquery.com

下载相应的版本放在自己的项目目录下即可。

完整代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>jQuery UI 自动完成(Autocomplete) - 默认功能</title>
  6.     <link rel="stylesheet" href="/Public/Home/style/jquery-ui-1.11.4/jquery-ui.min.css">
  7.     <script src="/Public/Home/style/js/jquery-1.8.2.min.js"></script>
  8.     <script src="/Public/Home/style/jquery-ui-1.11.4/jquery-ui.min.js"></script>
  9.     <link rel="stylesheet" href="jqueryui/style.css">
  10.     <script>
  11.       $(function() {
  12.       var tag = [
  13.         "耳机",
  14.         "华为手机",
  15.         "移动硬盘",
  16.         "收音机"
  17.       ];
  18.       $("#input").autocomplete({
  19.         source: tag
  20.       });
  21.     });
  22.     </script>
  23.   </head>
  24.   <body>
  25.     <input id="input">      
  26.   </body>
  27. </html>

效果图如下:

请输入图片名称

在网页中引入jquery、jquery-ui相应的文件,然后使用jquery的autocomplete方法中的source属性即可,是不是很简单,很容易实现呢。

版权归 马富天PHP博客 所有

本文标题:《搜索框中自动完成(Autocomplete)的jquery插件实现示例》

本文链接地址:http://www.mafutian.net/145.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

0

0

上一篇《 聚类、增量聚类的简介 》 下一篇《 javascript获取当前日期和农历日期信息 》
分享到:

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多