手写下拉菜单，模糊查询数据

getCropList();//拉去列表数据
//下拉菜单显示隐藏
$(".plan_info .crops .crops_var .crops_info").on("click",".sousuo",function(e){
	e.stopPropagation();//阻止冒泡
});
$('.plan_info .crops .crops_var .crops_info').on('click',function(e){
	e.stopPropagation();
	if($('.crops .crops_var .crops_info ul').hasClass('hidden')){
	$('.crops .crops_var .crops_info ul').removeClass('hidden');
	}
	else{
		$('.crops .crops_var .crops_info ul').addClass('hidden');
	}
	$("body").on("click",function(e){
		$('.crops .crops_var .crops_info ul').addClass('hidden');
		$("body").off();
	});
})
//选择值
$('.crops .crops_var .crops_info ul').on('click','li',function(){
	var cropname =$(this).html();
	var cropvalue = $(this).attr('data_value');
	$('.plan_info .crops .crops_var .crops_info').attr('data_value',cropvalue);
	$('.plan_info .crops .crops_var .crops_info span').text(cropname);
})

$(".crops .crops_var .crops_info .sousuo .input_search").focus();
textCompare($(".crops .crops_var .crops_info .sousuo .input_search").eq(0),1000,speciesWordCompare);
//获取农作物列表
function getCropList(){
	getPost(urlPlantCropList,{"companyId":companyId},localStorage.getItem("ACCESSTOKEN"),function(res){
		if(res.respCode == 0){
			speciesArr = res.obj;
			renderSpeciesList(speciesArr);
		}
	})
}
//弹框作物种类下拉框：模糊匹配
function speciesWordCompare(inputobj){
	var newArr = [];
	var val = $(inputobj).val();
	for(let i=0;i<speciesArr.length;i++){
		var index = speciesArr[i].cropName.indexOf(val);
		if(index != -1){
			newArr.push(speciesArr[i]);
		}
	}
	renderSpeciesList(newArr);
}
//模糊匹配之后的列表
function renderSpeciesList(newArr){
	var str = '';
	newArr.forEach(function(ele,index){
		str+='<li data_value="'+ele.id+'">'+ele.cropName+'</li>';
	});
	$(".crops .crops_var .crops_info .sousuo").after(str);
};复制代码

好了就到这里了。

转载于:https://juejin.im/post/5baa001d6fb9a05d1f220f0a