下拉菜单搜索

html

<div class="selectContainer fl">
	<span class="selectOption" id="jsSelectOption" data-value="course">
		公开课
	</span>
	<ul class="selectMenu" id="jsSelectMenu" >
		<li data-value="course">公开课</li>
		<li data-value="teacher">授课老师</li>
		<li data-value="org">课程机构</li>
	</ul>
</div>

// 点击公开课出现下拉框及选中授课老师或机构事件
$('#jsSelectOption').on('click', function(){
	// 当点击下拉菜单出现下拉框
	var $jsSelectMenu = $('#jsSelectMenu');
	if($jsSelectMenu.css('display') == 'block') return;
	$jsSelectMenu.addClass('dis');
});
$('#jsSelectMenu > li').on('click', function(){
	var searchType = $(this).attr('data-value'),
		searchName = $(this).text(),
		$jsSelectOption = $('#jsSelectOption');
	$jsSelectOption.attr('data-value',searchType).text(searchName);  // 给$jsSelectOption 添加属性和值，就是替换成用户选择的
	$(this).parent().removeClass('dis');  // 将下拉框隐藏
});
$(document).on('click', function(e){    // 貌似不写也可以
	if(e.target != $('#jsSelectOption')[0] && e.target != $('#jsSelectMenu')[0]){
		$('#jsSelectMenu').removeClass('dis');

	}
});

上面的dis样式

.selectContainer ul.dis {
    display: block !important;
}

将搜索内容以GET方式传递到后端进行搜索

function search() {
    var type = $("#jsSelectOption").attr('data-value');
    var keywords = $("#search_keywords").val();
    if(keywords == ""){
        return
    }
    if(type == "course"){
        url = "{% url 'course:list' %}"
    } else if(type == "org"){
        url = "/org/list/"
    }else if(type == "teacher"){
        url = "{% url 'teacher:list' %}"
    }
    window.location.href = url + "?keywords=" + keywords;
}


$("#jsSearchBtn").on("click",function(){
    search();
});

后端处理，公开课，授课老师，课程机构都是一样的处理。以教师为例

from django.db.models import Q

all_teachers = Teacher.objects.all()
keywords = request.GET.get("keywords","")
all_teachers =  all_teachers.filter(Q(name__icontains=keywords)|Q(work_years__icontains=keywords))

猜你喜欢