问题：

如何根据ReactJS搜索栏中键入的字符串从数据库中查找记录

司寇书

2023-03-14

我想从mongoDB数据库中获取与我在搜索栏中键入的关键字相匹配的记录（车辆广告），并在reactJS前端显示它们。记录（车辆广告）的数据库模式由以下字段组成（制造商、地址、注册、年份、内色、外色、传输、车身类型、类别、型号）。因此，如果用户在搜索栏中键入像拉合尔丰田这样的东西，用户应该得到所有的记录（汽车广告），其中制造商是丰田，地址是拉合尔。

这是我的前端代码

家庭过滤器。js（它从搜索栏获取数据并将其保存在变量中，然后将其发送到另一个searchAd.js文件）

import React, { useEffect, useState } from 'react';
import './HeroSection.css';
import axios from 'axios';
import { useHistory } from 'react-router-dom';
import SearchAd from './SearchAd';

function Homefilter() {
  const [search, setSearch] = useState('');
  const history = useHistory();

  const Getsearch = () => {
    console.log(search);
    history.push(`/searchpage/${search}`);
  };

  return (
    <div class='container-fluid'>
      <div
        style={{ height: '350px', alignItems: 'center' }}
        class='row'
        id='colu'
      >
        <div class='col-lg-12 col-md-12 col-sm-12'>
          <div
            style={{
              justifyContent: 'center',
              alignContent: 'center',
              alignItems: 'center',
              textAlign: 'center',
            }}
          >
            <input
              style={{ display: 'inline', width: '35rem' }}
              type='text'
              name='search'
              class='form-control'
              placeholder='Enter keyword to search Vehicle'
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />
            <button onClick={Getsearch} class='btn btn-primary'>
              Search
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Homefilter;

SearchAd.js（从Homefilter.js接收变量并将其发送到GET请求后端**

import React, { useEffect, useState } from 'react';

import axios from 'axios';
import './Allads.css';
import { useParams } from 'react-router-dom';

const SearchAd = () => {
  const { search } = useParams();
  console.log(search);
  const [data, setData] = useState('');
  const stringse = JSON.stringify(search);
  console.log(stringse);

  const Getsearch = () => {
    axios
      .get('/searchdata', { params: { stringse } })
      .then((response) => {
        setData(response.data.data);
        console.log(response);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  useEffect(() => {
    Getsearch();
  }, []);

  if (data.length > 0) {
    return data.map((datas, index) => {
      console.log(datas);
      return (
        <div className='datas' key={datas._id}>
          <div style={{ marginTop: '20px' }} class='container-fluid'>
            <div class='row'>
              <div class='col-lg-1 col-md-1 col-sm-1 '></div>

              <div class='col-lg-4 col-md-4 col-sm-4 '>
                <div
                  style={{ backgroundColor: '#1c2237', height: '180px' }}
                  class='row'
                >
                  <div class='col-lg-12 col-md-12 col-sm-12'>
                    <h3 style={{ color: '#f00946' }}>
                      {datas.make} {datas.model}
                    </h3>
                    <p>
                      <b>{datas.location.formattedAddress}</b>
                    </p>
                    <p>
                      {datas.year} | {datas.mileage} Km | interior:{' '}
                      {datas.intcolor} | exterior: {datas.extcolor} |{' '}
                      {datas.engine} cc | {datas.transmission} |
                      {datas.registeration} Registered | {datas.bodytype} |{' '}
                      {datas.category}
                    </p>
                    <p>Updated: {datas.createdAt} </p>
                  </div>
                </div>

                <div
                  style={{ backgroundColor: '#f00946', height: '180px' }}
                  class='row'
                >
                  <div class='col-lg-12 col-md-12 col-sm-12'>
                    <h5 style={{ color: '#1c2237' }}> PKR: {datas.price} </h5>
                    <p style={{ marginTop: '70px' }}>
                      <b>mob #:</b>
                      {datas.mobilenumber}
                    </p>
                  </div>
                </div>
              </div>

              <div class='col-lg-6 col-md-6 col-sm-6 '>
                <div style={{ backgroundColor: 'white' }} class='row'>
                  <div class='col-lg-4 col-md-4 col-sm-4  '>
                    <img
                      className='zoomimg'
                      src={`http://localhost:3000/uploads/profilepics/${datas.images[0]}`}
                      alt='abc'
                    />
                  </div>
                  <div
                    style={{ paddingRight: '100px' }}
                    class='col-lg-4 col-md-4 col-sm-4 '
                  >
                    <img
                      className='zoomimg'
                      src={`http://localhost:3000/uploads/profilepics/${datas.images[1]}`}
                      alt='abc'
                    />
                  </div>
                  <div class='col-lg-4 col-md-4 col-sm-4 '>
                    <img
                      className='zoomimg'
                      src={`http://localhost:3000/uploads/profilepics/${datas.images[2]}`}
                      alt='abc'
                    />
                  </div>
                </div>

                <div style={{ backgroundColor: 'white' }} class='row'>
                  <div class='col-lg-4 col-md-4 col-sm-4 '>
                    {' '}
                    <img
                      className='zoomimg'
                      src={`http://localhost:3000/uploads/profilepics/${datas.images[3]}`}
                      alt='abc'
                    />
                  </div>
                  <div class='col-lg-4 col-md-4 col-sm-4 '>
                    {' '}
                    <img
                      className='zoomimg'
                      src={`http://localhost:3000/uploads/profilepics/${datas.images[4]}`}
                      alt='abc'
                    />
                  </div>
                  <div class='col-lg-4 col-md-4 col-sm-4 '>
                    {' '}
                    <img
                      className='zoomimg'
                      src={`http://localhost:3000/uploads/profilepics/${datas.images[5]}`}
                      alt='abc'
                    />
                  </div>
                </div>
              </div>

              <div class='col-lg-1 col-md-1 col-sm-1 '></div>
            </div>
          </div>
        </div>
      );
    });
  } else {
    return <h3>no more ads</h3>;
  }
};

export default SearchAd;

后端代码

router.get('/searchdata', async (req, res, next) => {
  console.log(req.query.stringse);
  const searchad = req.query.stringse;

  try {
    const mads = await Ads.find({ $text: { $search: searchad } });
    console.log(mads);
    return res.status(200).json({
      success: true,
      count: mads.length,
      data: mads,
    });
  } catch (err) {
    console.log(err);
    res.status(500).json({ error: 'server error' });
  }
});

车辆广告模式

const mongoose = require('mongoose');
const geocoder = require('../utils/geocoder');

const adsSchema = new mongoose.Schema({
  registeration: {
    type: String,
    required: true,
    index: true,
  },

  intcolor: {
    type: String,
    required: true,
    index: true,
  },
  extcolor: {
    type: String,
    required: true,
    index: true,
  },
  mileage: {
    type: Number,
    required: true,
  },
  price: {
    type: Number,
    required: true,
  },
  make: {
    type: String,
    required: true,
    index: true,
  },
  model: {
    type: String,
    required: true,
    index: true,
  },
  year: {
    type: Number,
    required: true,
    index: true,
  },
  discription: {
    type: String,
    required: true,
  },
  mobilenumber: {
    type: Number,
    required: true,
  },

  address: {
    type: String,
    required: true,
    index: true,
  },
  images: {
    type: Array,
    required: true,
  },
  transmission: {
    type: String,
    required: true,
    index: true,
  },
  engine: {
    type: String,
    required: true,
  },
  userId: {
    type: String,
    required: true,
  },
  serial: {
    type: String,
    required: true,
  },
  bodytype: {
    type: String,
    required: true,
    index: true,
  },
  category: {
    type: String,
    required: true,
    index: true,
  },

  location: {
    type: {
      type: String,
      enum: ['MultiPoint'],
    },
    coordinates: {
      type: [Number],
      index: '2dsphere',
    },
    formattedAddress: {
      type: String,
    },
  },
  createdAt: {
    type: Date,
    default: Date.now,
  },
});

adsSchema.index({
  make: 'text',
  address: 'text',
  registeration: 'text',
  year: 'text',
  intcolor: 'text',
  extcolor: 'text',
  transmission: 'text',
  bodytype: 'text',
  category: 'text',
  model: 'text',
});
adsSchema.pre('save', async function (next) {
  const loc = await geocoder.geocode(this.address);
  this.location = {
    type: 'multipoint',
    coordinates: [loc[0].longitude, loc[0].latitude],
    formattedAddress: loc[0].formattedAddress,
  };
  next();
});

const Ads = mongoose.model('ADS', adsSchema);
module.exports = Ads;

目前，我的代码的工作方式是，如果我键入单个关键字，比如键入一个type（toyota），它将向我显示make=toyota的所有车辆广告，如果我键入（Lahore），它将向我显示address=Lahore的所有车辆广告。但当我输入（拉合尔的丰田）时，它没有显示任何内容

共有1个答案

宗政功

2023-03-14

试试这个：

import React, { useEffect, useState } from 'react';

import axios from 'axios';
import './Allads.css';
import { useParams } from 'react-router-dom';

const SearchAd = () => {
const { search } = useParams();
console.log(search);
const [data, setData] = useState('');

const Getsearch = () => {
    const searchSep = " in "
    const regEscape = v => v.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
    const searchArr = str.split(new RegExp(regEscape(searchSep), "ig"));
    const params = {};
    if (searchArr.length === 2) {
        params.query = {make: searchArr[0].trim(), address: searchArr[1].trim()};
    }
    
    axios
    .get('/searchdata', params)
    .then((response) => {
        setData(response.data.data);
        console.log(response);
    })
    .catch((error) => {
        console.log(error);
    });
};

useEffect(() => {
    if (search) {
        Getsearch();
    }
}, [search]);

if (data.length > 0) {
    return data.map((datas, index) => {
    console.log(datas);
    return (
        <div className='datas' key={datas._id}>
        <div style={{ marginTop: '20px' }} class='container-fluid'>
            <div class='row'>
            <div class='col-lg-1 col-md-1 col-sm-1 '></div>

            <div class='col-lg-4 col-md-4 col-sm-4 '>
                <div
                style={{ backgroundColor: '#1c2237', height: '180px' }}
                class='row'
                >
                <div class='col-lg-12 col-md-12 col-sm-12'>
                    <h3 style={{ color: '#f00946' }}>
                    {datas.make} {datas.model}
                    </h3>
                    <p>
                    <b>{datas.location.formattedAddress}</b>
                    </p>
                    <p>
                    {datas.year} | {datas.mileage} Km | interior:{' '}
                    {datas.intcolor} | exterior: {datas.extcolor} |{' '}
                    {datas.engine} cc | {datas.transmission} |
                    {datas.registeration} Registered | {datas.bodytype} |{' '}
                    {datas.category}
                    </p>
                    <p>Updated: {datas.createdAt} </p>
                </div>
                </div>

                <div
                style={{ backgroundColor: '#f00946', height: '180px' }}
                class='row'
                >
                <div class='col-lg-12 col-md-12 col-sm-12'>
                    <h5 style={{ color: '#1c2237' }}> PKR: {datas.price} </h5>
                    <p style={{ marginTop: '70px' }}>
                    <b>mob #:</b>
                    {datas.mobilenumber}
                    </p>
                </div>
                </div>
            </div>

            <div class='col-lg-6 col-md-6 col-sm-6 '>
                <div style={{ backgroundColor: 'white' }} class='row'>
                <div class='col-lg-4 col-md-4 col-sm-4  '>
                    <img
                    className='zoomimg'
                    src={`http://localhost:3000/uploads/profilepics/${datas.images[0]}`}
                    alt='abc'
                    />
                </div>
                <div
                    style={{ paddingRight: '100px' }}
                    class='col-lg-4 col-md-4 col-sm-4 '
                >
                    <img
                    className='zoomimg'
                    src={`http://localhost:3000/uploads/profilepics/${datas.images[1]}`}
                    alt='abc'
                    />
                </div>
                <div class='col-lg-4 col-md-4 col-sm-4 '>
                    <img
                    className='zoomimg'
                    src={`http://localhost:3000/uploads/profilepics/${datas.images[2]}`}
                    alt='abc'
                    />
                </div>
                </div>

                <div style={{ backgroundColor: 'white' }} class='row'>
                <div class='col-lg-4 col-md-4 col-sm-4 '>
                    {' '}
                    <img
                    className='zoomimg'
                    src={`http://localhost:3000/uploads/profilepics/${datas.images[3]}`}
                    alt='abc'
                    />
                </div>
                <div class='col-lg-4 col-md-4 col-sm-4 '>
                    {' '}
                    <img
                    className='zoomimg'
                    src={`http://localhost:3000/uploads/profilepics/${datas.images[4]}`}
                    alt='abc'
                    />
                </div>
                <div class='col-lg-4 col-md-4 col-sm-4 '>
                    {' '}
                    <img
                    className='zoomimg'
                    src={`http://localhost:3000/uploads/profilepics/${datas.images[5]}`}
                    alt='abc'
                    />
                </div>
                </div>
            </div>

            <div class='col-lg-1 col-md-1 col-sm-1 '></div>
            </div>
        </div>
        </div>
    );
    });
} else {
    return <h3>no more ads</h3>;
}
};

export default SearchAd;

但是，如果在搜索文本中有多个短语，则它不起作用。

类似资料：

如何使用findById（）搜索数据库中的字符串id？

如何按ID搜索字符串路径变量而不是整数？我喜欢查找名称。下面的方法运行良好，但仅将ID作为整数值。谢谢：）
如何在整个数据库中查找字符串？

问题内容：我有一个特定的字符串，例如“ 123abcd”，但我不知道表的名称，甚至不知道SQL Server数据库中表内的列的名称。我想通过选择找到它并显示相关字符串的所有列，所以我想知道以下内容：出于显而易见的原因，它不起作用，但是有一种简单的方法可以创建一个select语句来执行类似的操作？问题答案：这将起作用：不过，有几点警告。首先，这是极其缓慢且未优化的。所有值都将被简单地转
在MySQL数据库中快速搜索字符串？

本文向大家介绍在MySQL数据库中快速搜索字符串？，包括了在MySQL数据库中快速搜索字符串？的使用技巧和注意事项，需要的朋友参考一下使用FULLTEXT搜索来快速搜索字符串。让我们首先创建一个表- 这是创建全文本搜索的查询- 使用插入命令在表中插入一些记录- 使用select语句显示表中的所有记录- 这将产生以下输出- 以下是在MySQL数据库中快速搜索字符串的查询。在这里，我们正在搜索字符串
Ruby on Rails-根据查询在数据库中搜索

问题内容：我有一个简单的表单，可以在其中设置要浏览的查询，例如 panasonic viera 。这是关于我如何在数据库中搜索术语的方法：该查询看起来像是％panasonic viera％，但是我需要以这种方式搜索查询：％panasonic％viera％ -我需要找到所有产品，标题中的单词 panasonic 或 viera …在哪里，但是如何制作这个查询？问题答案：一种解决方案
如何在MySQL数据库中保存的字符串中进行搜索

我通过在JTextField中获取用户的输入创建了一个JList。然后，我将jList转换为String，将jList保存到Mysql数据库，因为我希望将jList项保存在单行中作为单个条目。向JList添加用户输入的代码：但是在使用此代码时，Jtable并不显示任何值，尽管它使用表头名称。请任何人可以检查我正确在如何搜索中保存在MySQL数据库的字符串。我认为问题是存在的，因为其他事情都很好
在数据库中查找重复的字符串

问题内容：我需要找到表中的所有行，其中特定字段的字符串在两个或多个位置重复。可以在MySQL语句中完成吗？编辑我需要获取每一行，而不仅仅是计数有多少重复项。我希望能够编辑这些字段。问题答案：是的，尝试这样的事情：

如何根据ReactJS搜索栏中键入的字符串从数据库中查找记录

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档