# typeahead-dropdown

> TypeAhead dropdown with pagination

Latest version **0.3.8** (published 2021-02-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install typeahead-dropdown
pnpm add typeahead-dropdown
yarn add typeahead-dropdown
bun add typeahead-dropdown
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.8 |
| Published | 2021-02-11 |
| First published | 2020-04-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 842.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Neim Elezi - Imce |
| Maintainers | imce |

## Links

- npm: https://www.npmjs.com/package/typeahead-dropdown
- Repository: https://github.com/imceZZ/TypeAheadDropdown
- Homepage: https://github.com/imceZZ/TypeAheadDropdown#readme
- Issues: https://github.com/imceZZ/TypeAheadDropdown/issues
- npm.io page: https://npm.io/package/typeahead-dropdown

## Recent versions

- 0.3.8 (latest) — 2021-02-11
- 0.3.7 — 2021-01-14
- 0.3.6 — 2021-01-14
- 0.3.5 — 2021-01-14
- 0.3.4 — 2021-01-14
- 0.3.3 — 2021-01-14
- 0.3.2 — 2021-01-14
- 0.3.1 — 2020-12-15
- 0.3.0 — 2020-12-15
- 0.2.9 — 2020-05-18
- 0.2.8 — 2020-05-18
- 0.2.7 — 2020-05-18
- 0.2.6 — 2020-04-30
- 0.2.5 — 2020-04-16
- 0.2.4 — 2020-04-16
- … 13 more at https://npm.io/package/typeahead-dropdown/versions

## README

# TypeAhead Dropdown

![](typeAheadDropdownGIF.gif)

TypeAhead Dropdown is a ReactJS UI component that allows you to search based on the text that you give in the input and also you have options Previous and Next to see all results based on the query that you have made.

## Getting Started

These instructions will help you how to implement and use this UI component.

### Prerequisites

You should install this component in ReactJS application otherwise will not work.

If you don't specify (data) prop when you use TypeAheadDropdown then in the dropdown you will see the default list that I have implemented for testing.

You must declare these methods in the component otherwise will not work:

**NOTE**: In case that list is not updated when you call your API and you are trying to change data={data} then in the method handleChange add this line at the end **this.forceUpdate()**;

```
getFullName(fullName) {
  console.log(fullName);
}
handleChange(textInput) {
  console.log(textInput);
}
btnPrevious() {
  console.log("previous button clicked");
}
btnNext() {
  console.log("next button clicked");
}
```

### Installing

To install this package you should run:

```
npm install TypeAheadDropdown --save
```

After installing you are ready to use it by importing:

```
import TypeAheadDropdown from "typeahead-dropdown";
```

Now you can use it in component

```
class TypeAhead extends React.Component {
  getFullName(fullName) {
    console.log(fullName);
  }
  handleChange(textInput) {
    console.log(textInput);
  }
  btnPrevious() {
    console.log("previous button clicked");
  }
  btnNext() {
    console.log("next button clicked");
  }
  render() {
    return (
      <TypeAheadDropdown
        displayProperties={["name", "surname"]}
        selectedObjectToReturn={["id", "name", "surname"]}
        onChange={this.handleChange}
        data={data}
        getFullName={this.getFullName}
        btnPrevious={this.btnPrevious}
        btnNext={this.btnNext}
        firstButton="Previous"
        secondButton="Next"
      />
    );
  }
}
```

## User guide

| Prop name              | Description                                                                                                             | Required |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------- | -------- |
| getFullName            | This function will return object with with props that you specify in selectedObjectToReturn                             | Yes      |
| btnPrevious            | Function to manipulate list                                                                                             | Yes      |
| btnNext                | Function to manipulate list                                                                                             | Yes      |
| onChange               | Function that returns text which you write in text-input                                                                | Yes      |
| displayProperties      | Specify props of the object inside array NOTE: No more than 2 ['name','surname']                                        | Yes      |
| selectedObjectToReturn | Specify props that you want to be returned as object in getFullName method NOTE: No more than 3 ['id','name','surname'] | Yes      |
| data                   | Array with object's                                                                                                     | No       |
| defaultName            | Set default value in the text-input                                                                                     | No       |
| placeholder            | Set placeholder of the text-input                                                                                       | No       |
| firstButton            | Title of the first button                                                                                               | No       |
| secondButton           | Title of the second button                                                                                              | No       |
| btnBackgroundColor     | Background-color of the button's, example 'red'                                                                         | No       |
| btnTextColor           | Text color of the button's                                                                                              | No       |
| btnfFooterBackground   | Background-color of the div where button's are placed                                                                   | No       |
| ulBackgroundColor      | Background-color of the unordered list                                                                                  | No       |
| liColor                | List item color                                                                                                         | No       |
| height                 | Height of the text input                                                                                                | No       |
| width                  | Width of the text input                                                                                                 | No       |

## Data prop example

```
[
  {
    id:1,
    name: "Imce",
    surname: "Elezi",
    age: 25
  },
  {
    id:2,
    name: "Shqipe",
    surname: "Salii",
    age: 22
  },
  {
    id:3,
    name: "Neim",
    surname: "Elezi",
    age: 24
  },
  {
    id:3,
    name: "Aldion",
    surname: "Ambari",
    age: 23
  },
  {
    id:4,
    name: "Brian",
    surname: "Haas",
    age: 25
  },
  {
    id:5,
    name: "Arian",
    surname: "Derdo",
    age: 25
  }
];
```

## Author

- **Neim Elezi aka Imce** - (https://github.com/imceZZ)

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details

---
_Source: https://npm.io/package/typeahead-dropdown · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._