bs_typeahead的简单使用

最新推荐文章于 2022-10-16 21:09:48 发布

岁月栖迟

最新推荐文章于 2022-10-16 21:09:48 发布

阅读量397

点赞数

文章标签： java jquery

本文链接：https://blog.csdn.net/weixin_40341786/article/details/109231074

版权

这篇博客介绍了如何通过引入jQuery、Bootstrap和Bootstrap-Typeahead插件，创建一个支持自动补全功能的输入框。在JavaScript中，利用Ajax进行后台查询，根据用户输入的内容进行模糊匹配，实时更新下拉建议列表。示例代码详细展示了从设置样式、加载库到实现交互的完整过程。

摘要由CSDN通过智能技术生成

1.引入插件包

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bs_typeahead/bootstrap3-typeahead.min.js"></script>

2.创建容器

<input type="text" id="create-accountName" placeholder="支持自动补全，输入客户不存在则新建">

3.js代码

只需要把数据库查询的数据赋值给process，这里的query字段可以获取你所输入的内容赋值给要发往后台的参数进行模糊查询（注意从数据库查单个字段）

$("#create-accountName").typeahead({
			source:function (query,process) {
				$.ajax({
					url:"workbench/transaction/selectCustomerfortran.do",
					data:{
						name:query
					},
					type:"post",
					dataType:"json",
					success:function (data) {
						process(data);
					}
				});
			}
		});