网站开发-神似百度搜索的多条件查询

摘要:  网站开发-应该叫多条件查询一、需求场景页面部分代码:如果搜索框内没有输入,则查询到的数据是所有比赛的全部参赛者,只点击正式学员或者非正式学员,则会在全部数据中筛选符合搜索条件的搜索。如果有输入,则更具 ...

网站开发-应该叫多条件查询

一、需求场景

网站开发-神似百度搜索的多条件查询

页面部分代码:

网站开发-神似百度搜索的多条件查询

如果搜索框内没有输入,则查询到的数据是所有比赛的全部参赛者,只点击正式学员或者非正式学员,则会在全部数据中筛选符合搜索条件的搜索。如果有输入,则更具输入内容和勾选的选项呈现内容,再次改变右侧checkbox的值,会在输入框中的内容匹配的数据中筛选数据呈现,类似于百度搜索的这种

网站开发-神似百度搜索的多条件查询

当然,我的比百度要简单很多,感觉这应该归到多条件查询吧。

二、设计思路

项目使用的是CI框架,由于要实现点击按钮和两个checkbox都能够实时显示相应数据,所以我给这三个元素同一个class,这样我就只用写一个点击事件了,因为要多个条件查询,当然要用ajax传递多个参数给后台,checkbox的取值可以看作一个值传递,但是由于checkbox可能被选中两个,所以传递给后台的checkbox的值就要用数组来实现,这个数组可能有一个或者两个元素。另外还要将搜索框的值通过ajax传给后台,在后台分析ajax传过来的值,并进行相应处理。

三、代码实现

网站开发-神似百度搜索的多条件查询

js代码1

网站开发-神似百度搜索的多条件查询

js代码2

网站开发-神似百度搜索的多条件查询

js代码3

Js代码写在了view中,这部分就是利用ajax传数据到后台,并将后台返回的数据根据情况进行分页呈现,由于代码太多,分页部分代码我收缩了一点,我之前有文章写如何对数据进行分页。

后台部分代码,不多解释。

Controller代码:

网站开发-神似百度搜索的多条件查询

Model代码:

网站开发-神似百度搜索的多条件查询

代码写的不标准,如果你有什么疑问或提议,欢迎在评论区留言,共同进步!

如果文章对你有帮助,欢迎点击上方按钮打赏作者

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

返回顶部