微信小程序开发搜索功能实现微信小程序开发搜索功能实现(前端前端+后端后端+数据库数据库)
2019年5月7日更新这是写的最新的一篇文章大家看这篇:https://www.jb51.net/article/157081.htm
界面比较丑,主要实现逻辑…
超级简单的界面,表单,提交按钮,搜索结果展示区域…
下面是index.wxml
<!--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({
title: '已提交',
icon: 'success',