@logo-rn/logo-auto-complete

is a component in which a record can be selected by searching the editor content or by selection from the list.

Installation

Install the component:

npm i @logo-rn/logo-auto-complete -s

Usage

Once installed, import the component in your application:

import {LogoAutoComplete} from '@logo-rn/logo-auto-complete';

  const source = {
       columnProperties: [
          {
              displaytype: "DataColumn",
              caption: "Name",
              width: 120,
              widthUnit: "Pixel",
              backColor: GHOST_COLOR,
              fontColor: BLACK,
              id: "0"
          },
          {
              displaytype: "NumericColumn",
              caption: "Age",
              width: 120,
              widthUnit: "Pixel",
              backColor: GHOST_COLOR,
              fontColor: BLACK,
              id: "0"
          },
          {
              displaytype: "DataColumn",
             caption: "Class",
               width: 120,
              widthUnit: "Pixel",
              backColor: GHOST_COLOR,
              fontColor: BLACK,
              id: "0"
          }
      ],
      rows: [
          [
              { value: "Ahmet" },
              { value: "32" },
              { value: "A" }
          ],
          [
              { value: "Ahmetcan" },
              { value: "30" },
              { value: "A" }
          ],
          [
              { value: "Ahmet" },
              { value: "22" },
              { value: "B" }
          ],
          [
              { value: "Ahmet Eren" },
              { value: "25" },
              { value: "C" }
          ],
          [
               { value: "Eren" },
               { value: "31" },
               { value: "B" }
           ],
           [
               { value: "Devrim" },
               { value: "21" },
               { value: "A" }
           ],
           [
               { value: "Emine" },
               { value: "20" },
               { value: "B" }
           ],
           [
               { value: "Büşra" },
               { value: "25" },
               { value: "C" }
           ],
           [
               { value: "Serhan" },
               { value: "21" },
               { value: "C" }
           ],
           [
               { value: "Gamze" },
               { value: "25" },
               { value: "D" }
           ],
           [
               { value: "Serdar" },
               { value: "20" },
               { value: "D" }
           ],
           [
               { value: "Mustafa" },
               { value: "21" },
               { value: "D" }
           ],
       ]
  }
  const [itemList, setItemList] = useState(source)
  //..
  <LogoAutoComplete
              id='a-c'
               onChange={() => console.log("Changed")}
               lookup={{
                   code: itemList,
                   focusInDisplay: "Name",
                   focusOutDisplay: ["Name", "Class"]
               }}
               exit={() => console.log("Exit")}
               setItemList={setItemList}
           />

For more detailed information, please visit:

Logo Elements Documentation ↗