手寫下拉選單，模糊查詢資料

劍未佩妥發表於2018-09-25

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);
};複製程式碼

好了就到這裡了。


相關文章