当前位置：首页 > news >正文

实现搜索功能：第一部分

news 来源：原创 2025/5/15 7:38:19

实现搜索功能：第一部分

从本节开始，我们将实现我们的食谱小应用的搜索功能！

首先我们先看一下API文章，用什么样的方法来获取全部的食谱的

在这里插入图片描述

所以我们按照这个文章先写一个函数，这个函数主要是一个AJAX请求，然后来测试一下返回数据是否正常，然后再看一下我们想要去获取哪些数据；

export const loadSearchResults = async function (query) {
  try {
    const data = await getJSON(`${API_URL}?search=${query}`);
    console.log(data);
  } catch(err) {
    console.error(`${err}😰😰😰`);
    throw err;
  }
};
loadSearchResults('pizza');

在这里插入图片描述

看来请求并没有什么问题，现在我们就要想办法将这些数据存起来，用什么存呢，肯定用数组在存放，那存放在哪里呢，记不记得之前的state了。我们需要将所有的数据都存储到这里面；

export const state = {
  recipe: {},
  search: {
    query: '',
    results: [],
  },
};

现在我们将所有的食谱数据都存起来，然后的话再来测试一下

export const loadSearchResults = async function (query) {
  try {
    state.search.query = query;
    const data = await getJSON(`${API_URL}?search=${query}`);
    console.log(data);

    state.search.results = data.data.recipes.map(rec => {
      return {
        id: rec.id,
        title: rec.title,
        publisher: rec.publisher,
        image: rec.image_url,
      };
    });
    console.log(state.search.results);
  } catch (err) {
    console.error(`${err}😰😰😰`);
    throw err;
  }
};
loadSearchResults('pizza');

在这里插入图片描述

测试成功之后，我们在控制器中将功能进行调用

const controlSearchResults = async function () {
  try {
    await model.loadSearchResults('pizza');
    console.log(model.state.search.results);
  } catch (err) {
    console.log(err);
  }
};
controlSearchResults();

为什么遵循MVC架构，将DOM页面上的操作我们将不在控制器上面进行操作，所以我们单独的创建一个搜索的视图文件。文件简单的一些选择器和监听事件

class SearchView {
  #parentEl = document.querySelector('.search');

  getQuery() {
    return this.#parentEl.querySelector('.search__field').value;
  }
}

export default new SearchView();

接着我们在控制器里进行引入

import searchView from './view/searchView.js';

接着我们将输入框中提交保存到一个变量中

const controlSearchResults = async function () {
  try {
    const query = searchView.getQuery();
    if (!query) return;
    await model.loadSearchResults('pizza');
    console.log(model.state.search.results);
  } catch (err) {
    console.log(err);
  }
};

这里我们接着用之前说的发布者订阅者的模型来实现用户提交搜索之后的方法；

class SearchView {
  #parentEl = document.querySelector('.search');

  getQuery() {
    return this.#parentEl.querySelector('.search_field').value;
  }

  addHandlerSearch(handler) {
    this.#parentEl.addEventListener('submit', function (e) {
      e.preventDefault();
      handler();
    });
  }
}

和之前一样，我们需要在init中调用一下

const init = function () {
  recipeView.addHandlerRender(controlRecipes);
  searchView.addHandlerSearch(controlSearchResults);
};

init();

现在应该是可以了，我们尝试一下

在这里插入图片描述

在尝试一下其他的

在这里插入图片描述

现在我们在每次输入之后清楚一下搜索框的内容

  getQuery() {
    const query = this.#parentEl.querySelector('.search__field').value;
    this.#clearInput();
    return query;
  }

  #clearInput() {
    this.#parentEl.querySelector('.search__field').value = '';
  }