react搜索框组件 react-search-box

最新推荐文章于 2024-09-11 07:19:58 发布

转载最新推荐文章于 2024-09-11 07:19:58 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://www.npmjs.com/package/material-ui-search-bar

文章标签：

#react

javascripts 专栏收录该内容

5 篇文章

订阅专栏

这篇博客介绍了如何在React应用中使用react-search-box组件来实现目录搜索功能。通过安装并导入组件，配置数据源，设置回调函数等步骤，可以创建一个具有占位符、自动聚焦、清除选择等功能的搜索框。示例代码展示了如何渲染组件并定义不同属性，如输入框样式和选中项的回调处理。

用 react-search-box 组件，实现目录搜索

Installation

# npm 
npm i react-search-box --save
 
# yarn 
yarn add react-search-box

Usage

import React, { Component } from "react";
import ReactSearchBox from "react-search-box";
 
export default class App extends Component {
  data = [
    {
      key: "john",
      value: "John Doe",
    },
    {
      key: "jane",
      value: "Jane Doe",
    },
    {
      key: "mary",
      value: "Mary Phillips",
    },
    {
      key: "robert",
      value: "Robert",
    },
    {
      key: "karius",
      value: "Karius",
    },
  ];
 
  render() {
    return (
      <ReactSearchBox
        placeholder="Placeholder"
        value="Doe"
        data={this.data}
        callback={(record) => console.log(record)}
      />
    );
  }
}

Props

Prop	Description
placeholder	The placeholder text for the input box
data	An array of objects which acts as the source of data for the dropdown. This prop is required
fuseConfigs	Configs to override default Fuse configs
autoFocus	Focus on the input box once the component is mounted
clearOnSelect	Clear the input value when any record is selected
onSelect	A function which acts as a callback when any record is selected. It is triggered once a dropdown item is clicked
onFocus	A function which acts as a callback when the input is focussed
onChange	A function which acts as a callback when the input value is changed
inputFontColor	Color of the text in the input box
inputBorderColor	Color of the border of the input box
inputFontSize	Size of the font of the input box
inputHeight	Height of the input box
inputBackgroundColor	Background color of the input box
dropDownHoverColor	Background color on hover of the dropdown list items
dropDownBorderColor	Border color of the dropdown
leftIcon	Icon to be rendered on the left of the input box
iconBoxSize	The size of the icon (based on the leftIcon prop)
type	The type of the input