使用React实现的搜索功能代码示例，当输入框中有内容时才会显示下拉框，并更改class名为box的盒子的opacity,可以从名为Lists的数组对象中进行关键字搜索,。并且在输入框输入的内容去空，当输入框没有内容时下拉框也不显示。

好的，下面是一个简单的React搜索功能代码示例：

import React, { useState } from "react";

const Lists = [
  { id: 1, name: "apple" },
  { id: 2, name: "banana" },
  { id: 3, name: "orange" },
  { id: 4, name: "grape" },
  { id: 5, name: "watermelon" },
];

const Search = () => {
  const [searchTerm, setSearchTerm] = useState("");
  const [showDropdown, setShowDropdown] = useState(false);

  const handleInputChange = (event) => {
    const value = event.target.value.trim(); // 去空格
    setSearchTerm(value);
    setShowDropdown(value !== "");
  };

  const filteredLists = Lists.filter((list) =>
    list.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div>
      <input type="text" onChange={handleInputChange} />
      {showDropdown && (
        <ul className="box" style={{ opacity: 1 }}>
          {filteredLists.map((list) => (
            <li key={list.id}>{list.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default Search;

在这个代码示例中，我们首先定义了一个名为`Lists`的数组对象，其中包含了一些水果的名称。然后，我们定义了一个名为`Search`的函数组件，用于渲染搜索框和下拉框。

在组件中，我们使用了两个状态变量`searchTerm`和`showDropdown`。`searchTerm`用于保存用户输入的搜索关键字，`showDropdown`用于控制下拉框是否要显示。初始时，这两个状态变量都被设置为一个空字符串和`false`。

在`handleInputChange`函数中，我们首先使用`event.target.value.trim()`去掉用户输入关键字的前后空格，并将结果保存到`searchTerm`状态变量中。然后，我们通过判断`searchTerm`是否为空来决定是否显示下拉框。

接下来，我们使用`Array.filter()`方法对`Lists`数组进行过滤，只保留那些名称中包含`searchTerm`的元素。过滤后的结果保存在`filteredLists`变量中。

最后，我们使用条件渲染来控制下拉框的显示。只有当`showDropdown`为`true`时，才会渲染下拉框。下拉框中的内容则是从`filteredLists`数组中生成的。我们使用`Array.map()`方法遍历这个数组，为每个元素生成一个`<li>`标签，并将水果名称显示在标签中。

注意，我们在渲染下拉框的时候，使用了一个`style`属性来设置`box`盒子的透明度。这个属性的值是一个对象，其中`opacity`属性表示透明度的值。我们将它设置为`1`，就可以让下拉框完全显示出来。