-
2021-05-06 09:21:07
提示:以下是本篇文章正文内容,下面案例可供参考
一、Django如何实现搜索功能?
搜索一般指搜索字符串,使用django自带的filter数据库查询器便可
1.直接上代码:
代码如下(示例):
search = request.POST.get('search') all_student_obj_list=models.Student.objects.filter(name__icontains=search).all()
2.前端实现
代码如下(示例):
<input type="text" name="search"> <input type="submit" value="搜索">
all_student_obj_list=models.Student.objects.filter(item_info__icontains=search).all()中
item_info:自定义的数据库表中字段(本文中搜索数据库的字段为name)
__icontains:不区分大小写的模糊匹配(双下划线)更多相关内容 -
jsp怎么实现搜索功能,
2021-03-17 12:57:09在搜索的时候有两种方式:1、在数据库中实现,借用数据库的功能,可以轻松的实现搜索功能,然后后台要做的就是规格整理显示出来,方便客户的操作和查看!2、是将所有的内容显示出来,利用业内搜索,挨个查找,知道找...详细内容
在做后台管理的时候,当要管理的数据很多的时候,不可避免的就需要搜索查找功能。这样更简便,快捷,省时省力。因此,搜索也成了必不可少的部分!在搜索的时候有两种方式:
1、在数据库中实现,借用数据库的功能,可以轻松的实现搜索功能,然后后台要做的就是规格整理显示出来,方便客户的操作和查看!
2、是将所有的内容显示出来,利用业内搜索,挨个查找,知道找出令客户满意的那些条目为止!从网上找到了业内搜索的代码javaScript中实现:
代码如下:
在jsp业内代码:
javascript脚本中代码:var DOM = (document.getElementById) ? 1 : 0;
var NS4 = (document.layers) ? 1 : 0;
var IE4 = 0;
if (document.all)
{
IE4 = 1;
DOM = 0;
}
var win = window;
var n = 0;
function findIt() {
if (document.getElementById("searchstr").value != "")
findInPage(document.getElementById("searchstr").value);
}
function findInPage(str) {
var txt, i, found;
if (str == "")
return false;
if (DOM)
{
win.find(str, false, true);
return true;
}
if (NS4) {
if (!win.find(str))
while(win.find(str, false, true))
n++;
else
n++;
if (n == 0)
alert("未找到指定内容.");
}
if (IE4) {
txt = win.document.body.createTextRange();
for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) {
txt.moveStart("character", 1);
txt.moveEnd("textedit");
}
if (found) {
txt.moveStart("character", -1);
txt.findText(str);
txt.select();
txt.scrollIntoView();
n++;
}
else {
if (n > 0) {
n = 0;
findInPage(str);
}
else
alert("未找到指定内容.");
}
}
return false;
}
这个看你想要搜索什么,如果是您数据库里面的数据,那么就很简单了,你写一个form,包含关键字输入框和提交按钮,提交到后台,然后由后台程序负责从数据库中提取数据,select * from tablename where *** like '%?%' ;
*** 是你数据库记录中的关键字列表,?是你从前台传过来的搜索关键字。最后把数据库返回的结果展示到前台页面就可以了
相比较而言,个人还是更倾向于第一种,虽然会给数据库带来一定压力!但是第一种更直观,形象,便于操作!而且从用户角度看,也是更倾向于第一种!
-
Java实现搜索功能代码详解
2021-02-12 08:56:46首先,我们要清楚搜索框中根据关键字进行条件搜索发送的是Get请求,并且是向当前页面发送Get请求//示例代码 请求路径为当前页面路径 "/product"当我们要实现多条件搜索功能时,可以将搜索条件封装为一个Map集合,再...首先,我们要清楚搜索框中根据关键字进行条件搜索发送的是Get请求,并且是向当前页面发送Get请求
//示例代码 请求路径为当前页面路径 "/product"
当我们要实现多条件搜索功能时,可以将搜索条件封装为一个Map集合,再根据Map集合进行搜索
Controller层代码:
@GetMapping("/product")
public String list(@RequestParam(required = false,defaultValue = "1",name = "p")Integer pageNo,
@RequestParam(required = false,defaultValue = "")String productName,
@RequestParam(required = false,defaultValue = "")String place,
@RequestParam(required = false,defaultValue = "")Integer typeId,
@RequestParam(required = false,defaultValue = "")BigDecimal minPrice,
@RequestParam(required = false,defaultValue = "")BigDecimal maxPrice,
Model model) {
Map searchParam = new HashMap<>();
searchParam.put("productName",productName);
searchParam.put("place",place);
searchParam.put("typeId",typeId);
searchParam.put("minPrice",minPrice);
searchParam.put("maxPrice",maxPrice);
PageInfo pageInfo = kaolaService.findByPageNo(pageNo,searchParam);
model.addAttribute("pageInfo",pageInfo);
return "product/list";
}
业务层代码:
public PageInfo findByPageNo(Integer pageNo, Map searchParam) {
PageHelper.startPage(pageNo,10);
List kaolaList = kaolaMapper.findBySearchParamWithType(searchParam);
return new PageInfo<>(kaolaList);
}
MyBatis中的mapper.xml:
SELECT
kaola.*, kaola_type.id AS 'kaolaType.id',
kaola_type.type_name AS 'kaolaType.typeName',
parent_id AS 'kaolaType.parentId'
FROM
kaola
INNER JOIN kaola_type ON kaola.type_id = kaola_type.id
kaola.product_name LIKE concat('%',#{productName},'%')
and kaola.place = #{place}
and kaola.type_id = #{typeId}
= #{minPrice} ]]>
ORDER BY kaola.id DESC
这样,就可以从前端到后端实现多条件搜索功能了。我们还会遇到这样一种情况,在输入搜索条件时,显示列表会不断自动刷新,这里其实用到了Ajax的相关内容,在输入的过程中,会不断发出Ajax请求,然后刷新页面。
value="${param.productName}"是从请求url的参数中获取值,实现在输入关键字搜索后刷新页面显示关键字这一功能,直接上图:
在输入中文关键字进行搜索时,可以使用encodeURIComponent解决url路径显示中文乱码问题:
//分页
$('#pagination-demo').twbsPagination({
totalPages: ${pageInfo.pages},
visiblePages: 10,
first:'首页',
last:'末页',
prev:'上一页',
next:'下一页',
href:"?productName="+encodeURIComponent('${param.productName}')+"&place="+encodeURIComponent('${param.place}')
+ "&typeId=${param.typeId}&minPrice=${param.minPrice}&maxPrice=${param.maxPrice}&p={{number}}"
});
点击查看大图
搜索结果
总结
以上所述是小编给大家介绍的Java实现搜索功能代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
-
小程序云开发实现搜索功能
2020-05-14 10:46:00云开发数据库的模糊搜索,根据记录的字段字符串模糊搜索实现。 代码: 先在app.js初始化: //app.js App({ onLaunch: function () { wx.cloud.init({ env:'school-5k17122' }) }, globalData: { userInfo...云开发数据库的模糊搜索,根据记录的字段字符串模糊搜索实现。
代码:
先在app.js初始化:
//app.js App({ onLaunch: function () { wx.cloud.init({ env:'school-5k17122' }) }, globalData: { userInfo: null } })
然后搜索的wxml
<view class='page_row' bindtap="suo"> <view class="search"> <view class="df search_arr"> <icon class="searchcion" size='20' type='search'></icon> <input class="" bindinput="input_p" placeholder="请输入关键字" value="{{searchValue}}" /> </view> </view> <view class='sousuo' catchtap="see">搜索</view> </view> <block wx:if='{{obj}}' wx:for='{{obj}}' wx:key=''> <view class="title">成都信息工程大学</view> <view class="item">名字:{{item.name}}</view> <view class="item">位置:{{item.place}}</view> <view class="item">类型:{{item.type}}</view> </block>
然后在搜索页面的Js实现
// pages/search/search.js var text='' Page({ /** * 页面的初始数据 */ data: { }, see(){ var that=this // 田径 const db = wx.cloud.database() const school = db.collection('school') school.where({ type: { $regex: '.*' + text + '.*', $options: '1' } }).get({ success: res => { console.log('匹配', res) if (res.data.length == 0) { wx.showModal({ title: '提示', content: '暂时没找到对应答案', showCancel: false, success: function (res) { } }) return; }else{ that.setData({ obj: res.data }) } } }) }, input_p(e){ text = e.detail.value }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log('--------------1111') // const db = wx.cloud.database() // const school = db.collection('school') // school.add({ // // data 字段表示需新增的 JSON 数据 // data: { // name: '食堂厕所', // place: '一二食堂一楼', // type: '厕所' // }, // success: function (res) { // // res 是一个对象,其中有 _id 字段标记刚创建的记录的 id // console.log('--------------',res) // } // }) }, })
样式:
.search{ width: 80%; } .search_arr { border: 1px solid #d0d0d0; border-radius: 10rpx; margin-left: 20rpx; } .search_arr input{ margin-left: 60rpx; height: 60rpx; border-radius: 5px; } .bc_text { line-height: 68rpx; height: 68rpx; margin-top: 34rpx; } .sousuo { margin-left: 15rpx; width: 15%; line-height: 150%; text-align: center; border: 1px solid #d0d0d0; border-radius: 10rpx; } .page_row{ display: flex; flex-direction: row; border-bottom: 1px solid #d0d0d0; } .item{ margin: 40rpx; line-height: 100rpx; height: 100rpx; } .searchcion { margin: 10rpx 10rpx 10rpx 10rpx; position: absolute; left:25rpx; z-index: 2; width: 20px; height: 20px; text-align: center; } .title{ margin-top: 100rpx; margin-left: 30rpx; }
完成
-
JavaScript实现搜索功能
2020-01-09 11:52:12JavaScript实现搜索功能 实现效果 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>搜索功能实现</title> <style type="text/css"> *... -
Vue实现搜索功能
2020-03-22 13:24:11Vue 实现搜索功能 作者:爱编程的小金毛球球 日期:2020年3月22日 首先上图演示一下,菜单列表显示的搜索功能: 这里介绍一下应用到的v-model:双向数据绑定,常用于表单元素例如input元素。 HTML <template> ... -
用Java如何实现搜索功能?
2021-02-12 08:55:28首先,我们要清楚搜索框中根据关键字进行条件搜索发送的是Get请求,并且是向当前页面发送Get请求//示例代码 请求路径为当前页面路径 "/product"当我们要实现多条件搜索功能时,可以将搜索条件封装为一个Map集合,再... -
前端实现搜索功能和模糊查询
2020-02-26 17:07:40在前端实现搜索,获取数据部分可以用ajax来实现,动态生成标签,正则表达式实现的模糊查询 // $("#BA_230759697085187").remove() $("#BA_230759697085187").empty() $("#BA_230759697085187").append("<input... -
vue实现实现搜索功能
2019-04-11 17:06:38效果图 代码图片: 核心代码 watch: { searchWord () { if(this.timer){ clearTimeout(this.timer) } if(!this.searchWord){ ... -
QTreeview实现搜索功能查找功能
2019-05-26 21:08:47QTreeview查找功能的需求: 1.搜索某个节点时,该节点的父节点和子节点都显示出来 效果图如下: 输入搜索内容后: 核心代码如下: bool TableViewSortFilterModelBase::filterAcceptsRow(int ... -
vue项目实现搜索功能
2020-08-07 21:00:141、点击“首页“顶部搜索框,通过路由跳转到搜索页,并实现关键字模糊搜索功能 2、搜索页和首页下面“推荐商家”用到的JSON数据自行模拟,并正确搜索渲染出来 3、在搜索页保留每次的搜索历史关键字,在搜索页的... -
SpringBoot-实现搜索功能
2020-02-22 22:19:31搜索问题 " > div > < button type = " submit " class = " btn btn-default " > 搜索 button > form > 修改question.html中分页的跳转 首先需要获取到search的值,在indexController中 ... -
微信小程序 实现搜索功能
2020-07-02 21:45:31//阻止后续代码 } this.setData({ list:[],//每次搜索内容的时候,需要清空,(因为如果不清空的话可能会数据叠加) search:e.detail.value //e.detail.value input 传来的数据 }) this.loadList() //执行下一步 },... -
微信小程序如何实现搜索功能
2020-01-17 11:21:04在页面search.wxml中,定义一个input输入框以及搜索的点击按钮,分别为它们绑定点击事件handleInputChange()和handleSearch()的事件,同时在它们的下面定义搜索的列表,代码如下所示: <view class="search-... -
vue实现搜索功能
2019-06-05 12:07:37前言:最近小编也是刚跳槽新的公司一个月,前端技术栈是vue+element也是市面上...后端不自己做页面的筛选搜索功能,怎么让前端做这样的一个功能点的实现,可能小编太老实了吧。无所谓,不纠结这些,那就分析一下需求... -
Django简单全文搜索(Django实现搜索功能)
2019-05-06 09:24:42Django简单全文搜索(Django实现搜索功能) 本文转载自简单全文搜索 搜索是一个复杂的功能,但对于一些简单的搜索任务,我们可以使用Django Model 层提供的一些内置方法来完成。现在我们来为我们的博客提供一个... -
Vue + element UI实现搜索功能
2020-07-15 07:44:48如何用Vue+element实现搜索功能呢? 接下来的代码可能会对你有帮助呦。 //html <div class="search"> <div class="demo-input-suffix"> <el-autocomplete v-model="state" :fetch-sugg... -
vue前端实现搜索功能
2019-07-16 14:37:41代码如下 <template> <div class="safetyInfo"> <nut-searchbar placeText="请输入详细地址/门牌号/" v-model="search" @input="submitFun" ... -
微信小程序实现搜索功能以及效果(超详细)
2020-04-14 15:08:33我们先来看一下实现哪些功能: 1 搜索历史记录以及清空历史记录 2 热门搜索推荐以及更新推荐内容 3 根据输入框输入的内容来自动搜索相关查询,后台逻辑是模糊查询,后台就先不扯了 这里我用的是自己定义的虚拟数据,... -
微信小程序开发实现搜索功能
2018-06-08 10:53:59对于搜索都是会有一些需要的,所以搜索页面还是可以复用的。主页面就是下面这样: 这个页面在pages/components/component2/component2.wxml 点击页面中 黄色的input就可以跳转到真正的搜索页面:pages/... -
element-ui怎么实现搜索功能?思路是什么?
2020-06-19 22:46:38搜索实现思路 获取输入框的值(也称关键字)模糊搜索 通过事件触发将获取的值通过ajax请求搜索接口传递给后台 后台服务器通过服务端语言(node,PHP,Java)实现接收浏览器请求 后端语言查询数据库(Mysql,mongodb) ... -
ASP.NET/C#实现搜索功能
2019-01-20 17:49:05当然在我们的项目中我们不可能利用百度,谷歌的搜索来实现自己项目中的搜索的,这时我们就需要自己进行开发实现这项功能了。那么怎样实现呢,其实现在现在我们有很多成熟的搜索算法,不必自己去研究,只需要自己修改... -
后端实现搜索功能
2018-09-02 19:14:39界面比较丑,主要实现逻辑... 超级简单的界面,表单,提交按钮,搜索结果展示区域... 下面是index.wxml <!--index.wxml--> <form bindsubmit="formSubmit"&... -
移动端H5页面,通过点击软键盘搜索按钮实现搜索功能
2019-06-17 15:17:43两种方案: ...input type="search" class="search-input" placeholder="请输入搜索"> // js如下: $(".search input").keypress(function(e){ var key = $.trim($(this).val()); if(e.k... -
elementUI搜索条件样式以及vue+element纯前端实现搜索功能【数据量少】
2019-04-28 11:07:04效果图: ... <...-- 搜索框 --> <div class="seach-container"> <div class="flex flex-wrap justify-between"> <!-- 项目 --> <div classs="form-container"&... -
Django 实现搜索功能、分页功能和个人理解
2018-09-14 18:55:59最近在研究django的功能,分页功能根据官方文档可以简单的实现,但是如果配合上搜索,对搜索结果分页就要稍微费点周折。 话不多少,先上代码。 一、搜索配合分页 # 获取、判断并封装关keyword键搜索 kw = ... -
ant-design 实现 搜索功能
2018-09-19 22:23:00{/*搜索条件*/} , lg: 24, xl: 48 }}> 账号"> {getFieldDecorator('username')( 请输入" /> )} 姓名"> {getFieldDecorator('name')( 请输入" /> )} 状态"> {getFieldDecorator('status')... -
vue使用filter过滤简单实现搜索功能
2019-08-14 22:56:07input type="text" placeholder="请输入搜索内容" v-model="search"> <p v-for="(item, index) in searchMethod" :key="index">{{ item.name }}</p> arr: [ {name: 'qq', baz: '1'}, {name: ...