js实现联想搜索

最新推荐文章于 2025-10-09 05:53:19 发布

原创最新推荐文章于 2025-10-09 05:53:19 发布 · 7.4k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现动态联想搜索，通过监听输入事件，实现在关键字输入时实时更新搜索结果，类似百度搜索的体验。主要涉及的技术点包括事件委托delegate和keyup/keydown事件。

功能：根据关键字联想搜索出结果后，根据关键字的变化，实时出现结果，类似于百度搜索的功能

1、delegate的用法，专门用在子元素上绑定的事件 delegate("p", "click", function() { }

2 、key up key down 事件可以用

$(".input").on('input', function(e) {}

$("#searchres").delegate("p", "click", function() {
			$("#searchText").val($(this).text());
		});
		$("#searchText").keyup(function(e) {
			var key = e.keyCode;
			if ((key >= 48 & key <= 57) || key == 8) {
				var val = $.trim($(this).val());
				if ("" == val) {
					alert("输入内容不能为空")
				} else {
					$.ajax({
						type : "POST",
						url : "GoodsServlet",
						data : {
							"type" : "key",
							"value" : val
						},
						success : function(msg) {
							if ("无结果" == msg) {
								$("#searchres").html("<p>" + msg + "</p>");
							} else {
								var obj = eval("(" + msg + ")");
								var str = "";
								for (var i = 0; i < obj.length; i++) {
									str = str + "<p>" + obj[i].gid + "</p>";    
								}
								$("#searchres").html(str);
							}
						}
					}
					);
				}
			}
		}
		);