jquery+autocomplete.js实现html上的input联想功能

最新推荐文章于 2022-08-06 11:23:39 发布

W_DongQiang

最新推荐文章于 2022-08-06 11:23:39 发布

阅读量533

点赞数 2

分类专栏： js 文章标签： javascript jquery css html

本文链接：https://blog.youkuaiyun.com/W_DongQiang/article/details/105214205

版权

js 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何使用一个简单的联想插件，包括导入必要的JS和CSS文件，设置基本的样式，以及在HTML中通过JavaScript实现联想功能的具体代码。适合初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大早上的，也没什么想说的，简单记录一下联想插件的使用，昨天在百度上搜教程，看到各种各样的input联想教程，但是看了好几篇也没看懂，于是就下了个插件自己研究了下，发现，过于简单。

首先导入autocomplete.js和css文件，这里提供了0积分下载地址，找不到资源的gg可以去这下载一下，

https://download.youkuaiyun.com/download/W_DongQiang/12286631

/**输入框联想样式**/
.autocomplete-suggestions { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #999; background: #FFF; cursor: default; overflow: auto; -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); border-radius: 4px;}
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden;font-family: inherit }
.autocomplete-no-suggestion { padding: 2px 5px;}
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: bold; color: red; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { font-weight: bold; font-size: 16px; color: red; display: block; border-bottom: 1px solid #000; }

网上的教程花里胡哨的，其实对于一个联想框来说，它真正所需要的文件只有这些。

下面是html中使用联想插件的代码：

产品型号名称：<input type="text" id="searchValue" name="searchValue"/>

<script>
//联想字符串的数组，可以使用ajax或其他的方式从后台获取动态数组，填充过来
var s = ['产品一','产品二','产品三'];

$(function() {
		//联想
		$('#searchValue').autocomplete({
			lookup: s
		});
});
</script>

。。。。。。就这样，效果如下