搜索辅助输入插件 AutoCS

在讲解开始之前,你可能希望先查看:demo download

不看demo也可以,就平常使用Google 或百度在搜索框输入内容时,搜索框下自动显示关键字的提示。

这篇是《邮箱输入辅助插件 EmailPop》的后续。html结构和css样式一点没变,js也只改动了些许:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
(function() {
	var $bind, $pop, delay, rsDelay,
	resize = function() {
		if (rsDelay) clearTimeout(rsDelay);
		rsDelay = setTimeout(function() {
			var offset = $bind.offset();
			$pop.css({
				left: offset.left,
				top: offset.top + $bind.outerHeight() + 2,
				width: $bind.outerWidth()
			});
		}, 99)
	};
	$(function() {
		$("body").append('<ul id="autocs" class="autopop"></ul>');
		$pop = $("#autocs").on("mouseover", "li:not(:first)", function() {
			$pop.find("li.pop").removeClass("pop");
			$(this).addClass("pop");
		}).on("mousedown", "li:not(:first)", function() {
			$pop.hide();
			$bind.val($(this).text());
		})
	});
	$.fn.autocs = function(url) {
		return $(this).each(function() {
			var l = 0,
				delay = 0,
				$t = $(this).attr("autocomplete", "off").on({
					focus: function() {
						$bind = $t.trigger("keyup");//触发事件变为keyup
						resize();
						$(window).on("resize", resize);
					},
					keydown: function(e) {//用户输入事件分开了
						switch (e.which) {
							case 9:
								$pop.hide();
								break;
							case 13:
								$t.val($pop.hide().find(".pop").text());
								break;
							case 38:
								var $p = $pop.find(".pop").removeClass("pop");
								if ($p.index() > 0) $p.prev().addClass("pop");
								else $pop.find("li").last().addClass("pop");
								return false;
							case 40:
								var $p = $pop.find(".pop").removeClass("pop");
								if ($p.index() < l) $p.next().addClass("pop");
								else $pop.find("li").first().addClass("pop");
								return false;
						}
					},
					keyup: function(e) {//改为keyup事件处理内容
						switch (e.which) {
							case 9:
							case 38:
							case 40:
								return false;
								break;
							default:
								var val = $t.val(),
									str = "<li class='pop'>" + val + "</li>";
								if (val == "" || e.which == 13) $pop.hide();
								else {
									if (delay) clearTimeout(delay);
									delay = setTimeout(function() {
										$.ajax({//从服务器获取数据
											url: url,
											dataType: 'json',
											data: {
												key: val
											}
										}).done(function(data) {
											if (data.length > 0) {
												d = data;
												var i = 0,
													html = str;
												l = data.length;
												for (; i < l; i++) {
													html += '<li>' + data[i].key + '</li>';
												}
												$pop.html(html).show();
											} else {
												$pop.hide();
											}
										});
									}, 400)
								}
								$pop.html(str);
						}
					},
					blur: function() {
						$pop.hide();
						$(window).off("resize", resize);
					}
				})
		})
	}
})()

使用的话:

1
2
$("#search").autocs("1.json");//单个搜索框使用
$("#search input").autocs("1.json");//多个

仔细看看,就改了注释这四个地方,因为把用户输入事件分成了keydown和keyup两个事件:keydown控制数据列表操作(第二个注释处);keyup控制用户输入内容操作(第三个注释处)。所以第一个改变就是当用户选中搜索框时触发keyup。

之所以要分成两个事件,是因为搜索内容相对比较复杂,不像邮箱只是英文、数字及少数几个符号,分开可以减少用户误操作。主要还是汉字,输入法有时候会出现很多奇葩现象,尤其是98五笔,居然把回车给替了。

第四个注释处与服务器交互获取数据,url参数使用时传入,为减少浏览器消耗,这里把延迟加大到400毫秒,为求保险,你可以自行添加时间戳判断。

完毕,还是那句话:这个插件只是提供一个思路分享,不能保证应付所有情况,实际使用的时候,请自行修改样式、逻辑。如有问题,请留言不保证一定回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注