All files / src/autocomplete/_example AutoCompleteOpenExample.jsx

46.15% Statements 6/13
50% Branches 1/2
37.5% Functions 3/8
50% Lines 6/12

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        1x                         1x 1x   1x       5x                     3x                  
import React, { useState } from "react";
import { AutoComplete } from "@tencent/tea-component/lib/autocomplete";
import { Input } from "@tencent/tea-component/lib/input";
 
const options = [
  { value: "strawberry", text: "草莓", tooltip: "甜甜甜" },
  { value: "apple", text: "红莓", disabled: true },
  { value: "orange", text: "树莓" },
  { value: "coca-cola", text: "可口可乐" },
  {
    value: "pepsi-cola",
    text: "百事可乐",
    tooltip: "百事可乐为什么比可口可乐好喝?",
  },
];
 
export default function AutoCompleteExample() {
  const [open, setOpen] = useState(false);
  const [inputValue, setInputValue] = useState("");
 
  return (
    <AutoComplete
      open={!!inputValue && open}
      onOpenChange={open => setOpen(open)}
      options={options.filter(({ text }) => text.includes(inputValue))}
      keyword={inputValue}
      tips="没有匹配的标签"
      onChange={value => {
        const option = options.find(opt => opt.value === value);
        setInputValue(option.text);
        console.log(value);
      }}
      onScrollBottom={event => console.log(event)}
    >
      {ref => (
        <Input
          ref={ref}
          value={inputValue}
          onChange={value => setInputValue(value)}
        />
      )}
    </AutoComplete>
  );
}