下拉搜索，

最新推荐文章于 2024-07-09 23:44:56 发布

程序员_GG

最新推荐文章于 2024-07-09 23:44:56 发布

阅读量75

点赞数

分类专栏：前端文章标签：前端 js

本文链接：https://blog.csdn.net/weixin_45944720/article/details/119464983

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

autocomplete.js,自动补齐搜索

- 下拉搜索，自动补缺的前端代码。废话不多说，直接上代码。

下拉搜索，自动补缺的前端代码。废话不多说，直接上代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<script src="../autocomplete/jQuery-1.4.4.min.js"></script>
	<script src="../autocomplete/jquery.autocomplete.js"></script>
	<script>
		var emails = [
            { name: "Peter Pan", to: "peter@pan.de" },
            { name: "Molly", to: "molly@yahoo.com" },
            { name: "Forneria Marconi", to: "live@japan.jp" },
            { name: "Master <em>Sync</em>", to: "205bw@samsung.com" },
            { name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com" },
            { name: "Don Corleone", to: "don@vegas.com" },
            { name: "Mc Chick", to: "info@donalds.org" },
            { name: "Donnie Darko", to: "dd@timeshift.info" },
            { name: "Quake The Net", to: "webmaster@quakenet.org" },
            { name: "Dr. Write", to: "write@writable.com" },
            { name: "GG Bond", to: "Bond@qq.com" },
            { name: "Zhuzhu Xia", to: "zhuzhu@qq.com" }
        ];
$(function(){
    $("#searchInput").autocomplete('http://www.baidu.com', {
                    max: 5,    //列表里的条目数
                    minChars: 0,    //自动完成激活之前填入的最小字符
                    width: $("#searchInput").width()+1,     //提示的宽度，溢出隐藏
                    scrollHeight: 300,   //提示的高度，溢出显示滚动条
                    matchContains: true,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
                    autoFill: false,    //自动填充
                    formatItem: function(row, i, max) {
                        return i + '/' + max + ':"' + row.name + '"[' + row.to + ']';
                    },
                    formatMatch: function(row, i, max) {
                        return row.name + row.to;
                    },
                    formatResult: function(row) {
                        return row.to;
                    }
                }).result(function(event, row, formatted) {
                    alert($("#searchInput").width());
                });
});

	</script>
	</head>
	<body>
		<form><fieldset id="">
			<legend>
				查询：<input type="text" value="" id="searchInput" />
			</legend>
			
			
		</fieldset>
	</body>
</html>

链接: https://pan.baidu.com/s/1VIGInVxaN6Jx2jRzNM15xw.
密码：5nry

程序员_GG

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
下拉搜索，

autocomplete.js,自动补齐搜索下拉搜索，自动补缺的前端代码。废话不多说，直接上代码。下拉搜索，自动补缺的前端代码。废话不多说，直接上代码。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="../autocomplete/jQuery-1.4.4.min.js"></script
复制链接

扫一扫