1. 程式人生 > >js實現聯想搜尋

js實現聯想搜尋

功能:根據關鍵字聯想搜尋出結果後,根據關鍵字的變化,實時出現結果,類似於百度搜索的功能

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);
							}
						}
					}
					);
				}
			}
		}
		);