All files / src/autocomplete/_example AutoCompleteExample.jsx

53.85% Statements 14/26
50% Branches 1/2
46.15% Functions 6/13
54.17% Lines 13/24

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87          1x                         1x         1x 1x 5x 1x     1x       1x 1x   1x       5x                       3x                                             3x                      
import React, { useState } from "react";
import { AutoComplete } from "@tencent/tea-component/lib/autocomplete";
import { Input } from "@tencent/tea-component/lib/input";
import { Form } from "@tencent/tea-component/lib/form";
 
const options = [
  { groupKey: "fruit", value: "strawberry", text: "草莓", tooltip: "甜甜甜" },
  { groupKey: "fruit", value: "cranberry", text: "红莓", disabled: true },
  { groupKey: "fruit", value: "raspberry", text: "树莓" },
  { groupKey: "drink", value: "coca-cola", text: "可口可乐" },
  {
    groupKey: "drink",
    value: "pepsi-cola",
    text: "百事可乐",
    tooltip: "百事可乐为什么比可口可乐好喝?",
  },
];
 
const groups = {
  fruit: "水果",
  drink: "饮料",
};
 
const INPUT_VALUE = "__user_input__";
const withInputOption = (options, text) => {
  const filteredOptions = options.filter(opt => opt.text.includes(text));
  Iif (!filteredOptions.length) {
    filteredOptions.push({ value: INPUT_VALUE, text });
  }
  return filteredOptions;
};
 
export default function AutoCompleteExample() {
  const [inputValue1, setInputValue1] = useState("");
  const [inputValue2, setInputValue2] = useState("");
 
  return (
    <Form>
      <Form.Item label="输入筛选">
        <AutoComplete
          options={options.filter(({ text }) => text.includes(inputValue1))}
          groups={groups}
          keyword={inputValue1}
          tips="没有匹配的标签"
          onChange={value => {
            const option = options.find(opt => opt.value === value);
            setInputValue1(option.text);
            console.log(value);
          }}
          onScrollBottom={event => console.log(event)}
        >
          {ref => (
            <Input
              ref={ref}
              value={inputValue1}
              onChange={value => setInputValue1(value)}
            />
          )}
        </AutoComplete>
      </Form.Item>
 
      <Form.Item label="支持 options 外输入">
        <AutoComplete
          options={withInputOption(options, inputValue2)}
          groups={groups}
          keyword={inputValue2}
          onChange={value => {
            const option = withInputOption(options, inputValue2).find(
              opt => opt.value === value
            );
            setInputValue2(option.text);
            console.log(value);
          }}
        >
          {ref => (
            <Input
              ref={ref}
              value={inputValue2}
              onChange={value => setInputValue2(value)}
            />
          )}
        </AutoComplete>
      </Form.Item>
    </Form>
  );
}