微信小程序开发搜索功能实现(前端+后端+数据库)_微信小程序搜索框 - CSDN文库

小程序搜索

28 浏览量更新于2023-03-16 3 收藏 66KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

微信小程序开发搜索功能实现微信小程序开发搜索功能实现(前端前端+后端后端+数据库数据库)

主要介绍了微信小程序开发搜索功能实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一

定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

2019年5月7日更新这是写的最新的一篇文章大家看这篇：https://www.jb51.net/article/157081.htm

界面比较丑，主要实现逻辑...

超级简单的界面，表单，提交按钮，搜索结果展示区域...

下面是index.wxml

<form bindsubmit="formSubmit">

<input type="text" name="id" placeholder='输入关键词' style='border:1px solid #ccc;height:30px;'/>

<button formType="submit" class="btn">搜索</button>

</form>

<view>搜索结果</view>

<view wx:for="{{re}}" wx:key="re">

<view style='color:#f00;'>{{item.result}}</view>

<view style='color:green;'>{{item.title}}</view>

</view>

*跟前端差不多，form表单要加一个bindsubmit="formSubmit"

接着就是index.js

//index.js

//获取应用实例

const app = getApp()

Page({

/**

* 页面的初始数据

*/

data: {

result:'',

state:''

},

formSubmit: function (e) {

var that = this;

var formData = e.detail.value.id; //获取表单所有name=id的值

wx.request({

url: 'http://localhost/2018-5-24/search.php?id=' + formData,

data: formData,

header: { 'Content-Type': 'application/json' },

success: function (res) {

console.log(res.data)

that.setData({

re: res.data,

})

wx.showToast({

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

weixin_38599545

粉丝: 7
资源: 936

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈