博主辛苦了，我要打赏银两给博主，犒劳犒劳站长。
【摘要】在很多的网站中，搜索是一个必备的功能，在京东、淘宝需要搜索商品，当我们输入第一个字的时候会在相应的搜索栏下面给出我们可能想要输入的内容，本文介绍一下通过jQuery UI的自动完成插件实现该功能。
准备工作：下载jquery-ui的css、js文件和jquery文件
jquery-ui的下载地址：
http://jqueryui.com/download/all/jquery的下载地址：
http://jquery.com下载相应的版本放在自己的项目目录下即可。
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI 自动完成（Autocomplete） - 默认功能</title>
<link rel="stylesheet" href="/Public/Home/style/jquery-ui-1.11.4/jquery-ui.min.css">
<script src="/Public/Home/style/js/jquery-1.8.2.min.js"></script>
<script src="/Public/Home/style/jquery-ui-1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jqueryui/style.css">
<script>
$(function() {var tag = [
"耳机",
"华为手机",
"移动硬盘",
"收音机"
];
$("#input").autocomplete({source: tag
});
});
</script>
</head>
<body>
<input id="input">
</body>
</html>
效果图如下：
在网页中引入jquery、jquery-ui相应的文件，然后使用jquery的autocomplete方法中的source属性即可，是不是很简单，很容易实现呢。
版权归 马富天个人博客 所有
本文标题：《搜索框中自动完成（Autocomplete）的jquery插件实现示例》
本文链接地址：http://www.mafutian.com/145.html
转载请务必注明出处，小生将不胜感激，谢谢! 喜欢本文或觉得本文对您有帮助，请分享给您的朋友 ^_^
顶0
踩0
| 评论审核未开启 |
|
||
|