React Autocomplete（自動完成輸入）示例教程

lk20150415 發布于2019-08-02 16:04 / 2233人閱讀

摘要：示例教程是今天的主題。樣式將包含，，，它們是左上角的坐標和下拉菜單的寬度。這是函數，并為項目中的每個條目調用，它還傳遞以生成下拉菜單中每個項目的渲染樹。樣式是一組可選樣式，可用于改善下拉菜單中項目的外觀。所以，最后，我們已經完成了示例教程。

React Autocomplete示例教程是今天的主題。在現代Web開發中，使用React改善用戶體驗是很容易。自動完成的概念很簡單。它是基于用戶輸入的建議列表。然后，用戶可以按Enter鍵以完成短語。它節省了用戶的時間，這使用戶非常滿意。自動填充可以通過多種方式實現，如何過濾并呈現給用戶，在本文中，我們將使用傳遞給我們組件的固定推薦列表。在用戶輸入時，我們將過濾結果，并僅在建議中的任何位置顯示包含用戶輸入的字段。

如果您想了解有關React.js的更多信息，請查看此React 16 - 完整指南（包括React Router 4和Redux）指南。它有一個關于React和Redux的簡短介紹。React 16 - 完整指南（包括React Router 4和Redux）

React Autocomplete示例教程
我們在本教程中使用名為 [react-autocomplete]的庫(https://github.com/reactjs/re...。但首先，讓我們使用以下命令安裝 React.js 命令。

1:安裝 React.js.

鍵入以下命令。

npx create-react-app my-app
cd my-app
npm start

現在，使用以下命令安裝 react-autocomplete 庫。

npm install --save react-autocomplete

2: 創建靜態數據。

在 src 文件夾中，創建一個名為 data.js 的文件，并添加以下返回靜態數據的函數。

// data.js

export function getStocks() {
  return [
    { abbr: "ADANIPORTS", name: "Adani Ports & Special Economic Zone Ltd." },
    { abbr: "ASIANPAINT", name: "Asian Paints Ltd." },
    { abbr: "AXISBANK", name: "Axis Bank Ltd." },
    { abbr: "BAJAJ-AUTO", name: "Bajaj Auto Ltd." },
    { abbr: "BAJFINANCE", name: "Bajaj Finance" },
    { abbr: "BAJAJFINSV", name: "Bajaj Finserv Ltd." },
    { abbr: "BPCL", name: "Bharat Petroleum Corporation Ltd." },
    { abbr: "BHARTIARTL", name: "Bharti Airtel Ltd." },
    { abbr: "INFRATEL", name: "Bharti Infratel" },
    { abbr: "CIPLA", name: "Cipla Ltd." },
    { abbr: "COALINDIA", name: "Coal India Ltd" },
    { abbr: "DRREDDY", name: "Dr. Reddys Laboratories Ltd." },
    { abbr: "EICHERMOT", name: "Eicher Motors Ltd." },
    { abbr: "GAIL", name: "GAIL (India) Ltd." },
    { abbr: "GRASIM", name: "Grasim Industries Ltd." },
    { abbr: "HCLTECH", name: "HCL Technologies Ltd." },
    { abbr: "HDFCBANK", name: "HDFC Bank Ltd." },
    { abbr: "HEROMOTOCO", name: "Hero MotoCorp Ltd." },
    { abbr: "HINDALCO", name: "Hindalco Industries Ltd." },
    { abbr: "HINDPETRO", name: "Hindustan Petroleum Corporation Ltd." },
    { abbr: "HINDUNILVR", name: "Hindustan Unilever Ltd." },
    { abbr: "HDFC", name: "Housing Development Finance Corporation Ltd." },
    { abbr: "ITC", name: "I T C Ltd." },
    { abbr: "ICICIBANK", name: "ICICI Bank Ltd." },
    { abbr: "IBULHSGFIN", name: "Indiabulls Housing Finance" },
    { abbr: "IOC", name: "Indian Oil Corporation Ltd." },
    { abbr: "INDUSINDBK", name: "IndusInd Bank Ltd." },
    { abbr: "INFY    ", name: "Infosys Ltd." },
    { abbr: "KOTAKBANK", name: "Kotak Mahindra Bank Ltd." },
    { abbr: "LT", name: "Larsen & Toubro Ltd." },
    { abbr: "LUPIN", name: "Lupin Ltd." },
    { abbr: "M&M", name: "Mahindra & Mahindra Ltd." },
    { abbr: "MARUTI", name: "Maruti Suzuki India Ltd." },
    { abbr: "NTPC", name: "NTPC Ltd." },
    { abbr: "ONGC", name: "Oil & Natural Gas Corporation Ltd." },
    { abbr: "POWERGRID", name: "Power Grid Corporation of India Ltd." },
    { abbr: "RELIANCE", name: "Reliance Industries Ltd." },
    { abbr: "SBIN", name: "State Bank of India" },
    { abbr: "SUNPHARMA", name: "Sun Pharmaceutical Industries Ltd." },
    { abbr: "TCS", name: "Tata Consultancy Services Ltd." },
    { abbr: "TATAMOTORS", name: "Tata Motors Ltd." },
    { abbr: "TATASTEEL", name: "Tata Steel Ltd." },
    { abbr: "TECHM", name: "Tech Mahindra Ltd." },
    { abbr: "TITAN", name: "Titan Company Ltd." },
    { abbr: "ULTRACEMCO", name: "UltraTech Cement Ltd." },
    { abbr: "UPL", name: "UPL Ltd." },
    { abbr: "VEDL", name: "Vedanta Ltd" },
    { abbr: "WIPRO", name: "Wipro Ltd." },
    { abbr: "YESBANK", name: "Yes Bank Ltd." },
    { abbr: "ZEEL", name: "Zee Entertainment Enterprises Ltd." }
  ];
}

此功能將返回前50名股票名稱及其印度股票市場的縮寫。

另外，我們需要在這里再創建一個函數，那就是 matchStocks。

此功能允許我們過濾掉用戶在輸入區域中輸入的股票。因此，當用戶開始在文本框中鍵入時，它將與股票數組進行比較，如果找到匹配則返回并顯示給用戶。

所以編寫第二個函數并從 data.js 文件中導出它。

// data.js

export function matchStocks(state, value) {
  return (
    state.name.toLowerCase().indexOf(value.toLowerCase()) !== -1 ||
    state.abbr.toLowerCase().indexOf(value.toLowerCase()) !== -1
  );
}

所以，現在基本上，我們在 App.js 文件中導入這些函數并將其傳遞給 Autocomplete 組件。

3: Autocomplete API

它具有以下屬性。

value: 這是文本框的默認值，在我們的例子中，它將為空或“。

inputProps：這是一個對象。Props傳遞給 props.renderInput 。;默認情況下，除非您為 props.renderInput 指定了自定義值，否則這些道具將應用于由自動完成呈現的元素。

wrapperStyle：它是一個對象，它具有以下的默認值。

{
display: "inline-block"
}

items：這是一個數據數組，在 data.js 文件中定義。在我們的例子中，它是股票市場數據。

getItemValue：用于讀取項中每個條目的顯示值。

shouldItemRender：這是一個功能。為項目中的每個條目調用，其返回值用于確定是否應在下拉菜單中顯示。通過de，fault總是呈現所有項目。

onChange：這是一個函數，每次用戶更改輸入值時都會調用它。

onSelect：此功能在用戶從下拉菜單中選擇項目時調用。

renderMenu：這是函數并被調用以生成drop-dn菜單的渲染樹。確保返回的樹包含項中的每個條目，否則突出顯示的順序和鍵盤導航邏輯將中斷。樣式將包含{top，left，minWidth}，它們是左上角的坐標和下拉菜單的寬度。

renderItem：這是函數，并為項目中的每個條目調用，它還傳遞 shouldItemRender 以生成下拉菜單中每個項目的渲染樹。樣式是一組可選樣式，可用于改善下拉菜單中項目的外觀。

4：將自動填充組件添加到App.js文件中。

所以我們的最終 App.js 文件看起來像這樣。

import React, { Component } from "react";
import Autocomplete from  "react-autocomplete";
import { getStocks, matchStocks } from "./data";
import "./App.css";
class App extends Component {

  state = { value: "" };
render() {
    return (

         item.name }
          shouldItemRender={ matchStocks }
          onChange={(event, value) => this.setState({ value }) }
          onSelect={ value => this.setState({ value }) }
          renderMenu={ children => (

              { children }

          )}
          renderItem={ (item, isHighlighted) => (

              { item.name }

          )}
        />

      );
}
  }

export default App;

在這里，我們使用了前面討論過的所有屬性。其中一些仍然沒有，但你可以在Github上查看。

我們的 data.js 文件看起來像這樣。

// data.js

export function getStocks() {
  return [
    { abbr: "ADANIPORTS", name: "Adani Ports & Special Economic Zone Ltd." },
    { abbr: "ASIANPAINT", name: "Asian Paints Ltd." },
    { abbr: "AXISBANK", name: "Axis Bank Ltd." },
    { abbr: "BAJAJ-AUTO", name: "Bajaj Auto Ltd." },
    { abbr: "BAJFINANCE", name: "Bajaj Finance" },
    { abbr: "BAJAJFINSV", name: "Bajaj Finserv Ltd." },
    { abbr: "BPCL", name: "Bharat Petroleum Corporation Ltd." },
    { abbr: "BHARTIARTL", name: "Bharti Airtel Ltd." },
    { abbr: "INFRATEL", name: "Bharti Infratel" },
    { abbr: "CIPLA", name: "Cipla Ltd." },
    { abbr: "COALINDIA", name: "Coal India Ltd" },
    { abbr: "DRREDDY", name: "Dr. Reddys Laboratories Ltd." },
    { abbr: "EICHERMOT", name: "Eicher Motors Ltd." },
    { abbr: "GAIL    ", name: "GAIL (India) Ltd." },
    { abbr: "GRASIM", name: "Grasim Industries Ltd." },
    { abbr: "HCLTECH", name: "HCL Technologies Ltd." },
    { abbr: "HDFCBANK", name: "HDFC Bank Ltd." },
    { abbr: "HEROMOTOCO", name: "Hero MotoCorp Ltd." },
    { abbr: "HINDALCO", name: "Hindalco Industries Ltd." },
    { abbr: "HINDPETRO", name: "Hindustan Petroleum Corporation Ltd." },
    { abbr: "HINDUNILVR", name: "Hindustan Unilever Ltd." },
    { abbr: "HDFC", name: "Housing Development Finance Corporation Ltd." },
    { abbr: "ITC", name: "I T C Ltd." },
    { abbr: "ICICIBANK", name: "ICICI Bank Ltd." },
    { abbr: "IBULHSGFIN", name: "Indiabulls Housing Finance" },
    { abbr: "IOC", name: "Indian Oil Corporation Ltd." },
    { abbr: "INDUSINDBK", name: "IndusInd Bank Ltd." },
    { abbr: "INFY    ", name: "Infosys Ltd." },
    { abbr: "KOTAKBANK", name: "Kotak Mahindra Bank Ltd." },
    { abbr: "LT", name: "Larsen & Toubro Ltd." },
    { abbr: "LUPIN", name: "Lupin Ltd." },
    { abbr: "M&M", name: "Mahindra & Mahindra Ltd." },
    { abbr: "MARUTI", name: "Maruti Suzuki India Ltd." },
    { abbr: "NTPC", name: "NTPC Ltd." },
    { abbr: "ONGC", name: "Oil & Natural Gas Corporation Ltd." },
    { abbr: "POWERGRID", name: "Power Grid Corporation of India Ltd." },
    { abbr: "RELIANCE", name: "Reliance Industries Ltd." },
    { abbr: "SBIN", name: "State Bank of India" },
    { abbr: "SUNPHARMA", name: "Sun Pharmaceutical Industries Ltd." },
    { abbr: "TCS", name: "Tata Consultancy Services Ltd." },
    { abbr: "TATAMOTORS", name: "Tata Motors Ltd." },
    { abbr: "TATASTEEL", name: "Tata Steel Ltd." },
    { abbr: "TECHM", name: "Tech Mahindra Ltd." },
    { abbr: "TITAN", name: "Titan Company Ltd." },
    { abbr: "ULTRACEMCO", name: "UltraTech Cement Ltd." },
    { abbr: "UPL", name: "UPL Ltd." },
    { abbr: "VEDL", name: "Vedanta Ltd" },
    { abbr: "WIPRO", name: "Wipro Ltd." },
    { abbr: "YESBANK", name: "Yes Bank Ltd." },
    { abbr: "ZEEL", name: "Zee Entertainment Enterprises Ltd." }
  ];
}

export function matchStocks(state, value) {
  return (
    state.name.toLowerCase().indexOf(value.toLowerCase()) !== -1 ||
    state.abbr.toLowerCase().indexOf(value.toLowerCase()) !== -1
  );
}

最后， App.css 文件看起來像這樣。

body {
  color: #333;
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: 200;
}

.example {
  padding: 0 25px;
}

label {
  display: block;
margin: 5px 0;
}

code {
  padding: .2em .5em;
font-size: 85%;
background-color: rgba(0,0,0,0.04);
border-radius: 3px;
}

.menu {
  position: absolute;
box-sizing: border-box;
width: 100%;
border: 1px solid #cccccc;
}

.item {
  padding: 2px 6px;
cursor: default;
}

.item-highlighted {
  color: white;
background-color: #4095bf;
}

.item-header {
  background-color: #eeeeee;
color: #454545;
font-weight: bold;
}

保存所有文件并轉到 http：// localhost：3000 /

從數據數組中鍵入股票，您將獲得建議補全列表。

所以，最后，我們已經完成了 React Autocomplete示例教程。感謝您的參與。

云服務器 GPU云服務器自動完成自動完成文本框自動完成下拉框 jquery自動完成

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54614.html

React Autocomplete（自動完成輸入）示例教程

摘要：示例教程是今天的主題。樣式將包含，，，它們是左上角的坐標和下拉菜單的寬度。這是函數，并為項目中的每個條目調用，它還傳遞以生成下拉菜單中每個項目的渲染樹。樣式是一組可選樣式，可用于改善下拉菜單中項目的外觀。所以，最后，我們已經完成了示例教程。 React Autocomplete示例教程是今天的主題。在現代Web開發中，使用React改善用戶體驗是很容易。自動完成的概念很簡單。它是基于用...

woshicixide 2019-08-29 16:41 評論0 收藏0
React Autocomplete（自動完成輸入）示例教程

摘要：示例教程是今天的主題。樣式將包含，，，它們是左上角的坐標和下拉菜單的寬度。這是函數，并為項目中的每個條目調用，它還傳遞以生成下拉菜單中每個項目的渲染樹。樣式是一組可選樣式，可用于改善下拉菜單中項目的外觀。所以，最后，我們已經完成了示例教程。 React Autocomplete示例教程是今天的主題。在現代Web開發中，使用React改善用戶體驗是很容易。自動完成的概念很簡單。它是基于用...

hzc 2019-08-23 11:50 評論0 收藏0
禁止瀏覽器自動填充

摘要：如何禁止瀏覽器自動填充屬性規定輸入字段是否應該啟用自動完成功能方法一設置沒錯，是可以控制瀏覽器自動完成功能，但文檔里說可以禁止瀏覽器自動填充，經過實際操作一試，然而并不能，已經失效了，經過探索發現注意在像，等項目中應該用駝峰命名法加到對如何禁止瀏覽器自動填充 autocomplete 屬性規定輸入字段是否應該啟用自動完成功能方法一：設置autocomplete=new-passwo...

Jioby 2019-08-02 11:56 評論0 收藏0
HTML5 入門詳解

摘要：定義字符中文注音或字符的解釋或發音。表單域我們都知道標簽用于為用戶輸入創建表單。在中表單域添加了兩個新的屬性規定是否啟用表單的自動完成功能，默認。通過屬性和表單域的可以將輸入表單綁定到表單域中。 showImg(http://ww1.sinaimg.cn/large/007kscFEgy1fxgnw4hajoj31400p0q4d.jpg); 1. 認識HTML5 HTML5并不僅僅...

hqman 2019-08-26 13:25 評論0 收藏0