suggest

最新推荐文章于 2021-05-08 14:01:12 发布

weixin_33828101

最新推荐文章于 2021-05-08 14:01:12 发布

阅读量144

点赞数

本文详细介绍了如何自定义suggest搜索功能，包括输入框、建议显示、选择与发送请求等核心部分，通过实例代码展示了实现过程及使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

哪里都在用suggest。自己写一个，改起来灵活随意

function Suggest(obj, url, callback){
	obj = typeof obj == "string" ? $("#" + obj) : $(obj);
	this.position = obj.offset();
	this.left = this.position.left;
	this.top = this.position.top;
	if(obj[0].offsetHeight){
		this.top = this.top + obj[0].offsetHeight;
	}
	this.url = url;
	this.obj = obj;
	this.selectP = null;
	this.selectIndex = -1;
	var that = this;
	obj.on("keyup", function(e){
		var target = $(this);
		var kCode = e.keyCode;
		switch(kCode){
			case 13:
				callback && callback();
				break;
			case 38: //up
				$("#suggestContainer").find("p").removeClass("cur");
				if(that.selectIndex == -1){
					that.selectIndex = that.length;
				}
				that.selectIndex --;
				that.selectIndex != -1 && $("#suggestContainer p").eq(that.selectIndex).addClass("cur");
				obj.val(that.selectIndex != -1 ? $("#suggestContainer p").eq(that.selectIndex).html() : that.inputContent);
				break;
			case 40: //down
				$("#suggestContainer").find("p").removeClass("cur");
				if(that.selectIndex == that.length){
					that.selectIndex = -1;
				}
				that.selectIndex ++;
				if(that.selectIndex == that.length){
					that.selectIndex = -1;
					obj.val(that.inputContent);
				} else {
					$("#suggestContainer p").eq(that.selectIndex).addClass("cur");
					obj.val($("#suggestContainer p").eq(that.selectIndex).html());
				}
				break;
			default:
				that.inputContent = obj.val();
				if(!target.val()){
					$("#suggestContainer").remove(); 
					that.selectIndex = -1;
				} else{
					that.send(target.val());
				} 
				break;
		}
	});
	obj.on("blur", function(){
		$("#suggestContainer").remove();
	});
}
Suggest.prototype.init = function(data){
	data = data || [];
	$("#suggestContainer").remove();
	if(!data.length){
		return;
	}
	this.length = data.length;
	var that = this;
	that.selectIndex = -1;
	var container = [];
	container.push('<div id="suggestContainer" style="position:absolute; z-index:3000; top:' + this.top + 'px; left:' + this.left + 'px;">');
	for(var i = 0, len = data.length; i < len; i++){
		container.push('<p>' + data[i].name + '</p>');
	}
	container.push('</div>');
	$(document.body).append($(container.join("")));
	$("#suggestContainer").delegate("p", "hover", function(){
		$("#suggestContainer").find("p").removeClass("cur");
		var target = $(this);
		that.selectIndex = $("#suggestContainer p").index(target);
	});
	$("#suggestContainer").on("keypress", function(e){
		var kCode = e.keyCode;
		if(kCode == 13){
			that.obj.val($("#suggestContainer p").eq(that.selectIndex).val());
			$("#suggestContainer").remove();
			that.obj.blur();
		}
	});
}
//返回的数据格式肯定不同，需要重写此方法
Suggest.prototype.send = function(input){
	var that = this;
	$.ajax({
		url : this.url + input,
		type : "get",
		dataType : "jsonp",
		success : function(data){
			data = data.data;
			var dataThis = [];
			for(var i = 0, len = data.length; i < len; i++){
				dataThis.push({"name":data[i].soft_name});
			}
			that.init(dataThis);
		}
	});
}

css，可以自己定义

#suggestContainer {
	border:1px solid #90b8f5;
	width:150px;
	overflow:hidden;
	cursor:pointer;
}
#suggestContainer p {
	height:20px; 
	line-height:20px;
	font-size:14px;
	font-family:"微软雅黑", sans-serif;
	padding-left:5px;
	background-color:#fff;
	margin:0;
	white-space:nowrap;
}
#suggestContainer p.cur {
	color:#fff;
	background-color:#90b8f5;
}
#inputSuggest {
	font-size:14px;
	font-family:"微软雅黑", sans-serif;
}

使用：

//自己定义，点选suggest，或上下选取suggest时回车事件
function submitFun(){
	alert($("#inputSuggest").val());
}
//初始化。
//1 输入框ID
//2 suggest接口，以"keyword="结尾，
//3 点选时事件
var suggest = new Suggest("inputSuggest", "http://xxxx?keyword=", submitFun);