版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_38078822/article/details/82719071
jQuery UI中有自动完成插件，可以实现此功能，详细介绍
数组源是一个JavaScript数组，使用source选项提供给部件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉框模糊查询</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" >
$(function() {
//定义数组，可以从后台接收数据
var name= [ "张三丰", "张无忌","灭绝师太", "令狐冲", "韦小宝"];
var addres=["武当", "光明顶", "峨眉","华山","紫禁城"];
//自动填充，调用autocomplete插件
$( "#one" ).autocomplete({
//数据源，接收数组类型
source: name
});
$("#two").autocomplete({
source: addres
});
});
</script>
</head>
<body>
//此处的class="ui-widget" 是使用jQuery UI自带的样式，可以自己修改
<div class="ui-widget">
姓名：<input id="one" />
地址：<input id="two" />
</div>
</body>
</html>