ejmudi / react-autocomplete-hint

A React component for Autocomplete Hint.

react-autocomplete-hint

A React component for Autocomplete Hint.

Demo

Demo can be found here: https://ejmudi.github.io/react-autocomplete-hint/

Installation

npm install --save react-autocomplete-hint

or

yarn add react-autocomplete-hint

Usage

import { Hint } from 'react-autocomplete-hint';

const options = ["orange", "banana", "apple"];

// OR

const options = [
    {id: 1, label: "orange"}, 
    {id: '2', label: "banana"}, 
    {id: 3, label: "apple"}
];

<Hint options={options}>
    <input
        value={text}
        onChange={e => setText(e.target.value)} />
</Hint>

Click on the hint or use your keyboard Right key, Tab key (if allowTabFill is set to true), or Enter key (if allowEnterFill is set to true) to fill your input with the suggested hint.

Props

options (required): Array<string> | Array<object>

disableHint (optional): Boolean

allowTabFill (optional): Boolean

allowEnterFill (optional): Boolean

onFill (optional): (value: string | object)=> void

onHint (optional): (value: string | object | undefined)=> void

valueModifier (optional): (value: string)=> string

object option

If you're using objects for your options. object schema is as follows:

id: string | number

label: string

onFill

Returns the option selected immediately the input is filled with the suggested hint.

Note that it won't return the selected option with the casing the user typed, rather it returns the option with the casing specified in your options prop. For example, if the options are specified like this:...

const options = ["orange", "banana", "apple"];

...and the input gets filled with "ORange", onFill will still return "orange".

onHint

Returns the current hint.

valueModifier

This prop accepts a function that modifies your input value before it is saved in state.

It is typically useful when you are not setting e.target.value directly in state and need to modify the target value to some other value first before setting it in state.

Example: A case where you need to set the input value to uppercase irrespective of the casing the user types in:

const options = ["orange", "banana", "apple"];

const modifyValue = (value: string) => value.toUpperCase();

<Hint options={options} valueModifier={modifyValue}>
    <input
        value={text}
        onChange={e => setText(modifyValue(e.target.value))} />
</Hint>

Note: Not setting the valueModifier prop in cases like this might result to a malformed hint.

Duplicate data

If you are using objects for your options, You may have unexpected results if your data options contain objects with duplicate labels. For this reason, it is highly recommended that you pass in objects with unique labels if possible.

For example, if you pass in optionsWithDuplicateLabels as seen below and you then fill the input with the orange hint, the orange will be the first orange object found in the array as can be seen in the onFill prop:

const optionsWithDuplicateLabels = [
    {id: "1", label: "orange"},
    {id: "2", label: "orange"},
    {id: "3", label: "banana"}
];

<Hint options={optionsWithDuplicateLabels} onFill={value=> {
    // will always log {id: "1", label: "orange"} when orange is selected
    // {id: "2", label: "orange"} will never be logged.
    console.log(value);
}}>
    <input
        value={text}
        onChange={e => setText(e.target.value)} />
</Hint>

License

MIT

Inspired by React Bootstrap Typeahead.

react-autocomplete-hint's Issues

How do I support multiple text input

If I typing multiple text and for each if have mach in list should display hint text.

Below img

When updating the input programmaticaly the suggestion doesn't seem to update accordingly

When updating the input programmaticaly (in my case, by selecting from a dropdown menu), the suggestion doesn't seem to update accordingly, and there is no way to trigger the update.

Desktop (please complete the following information):

• OS: W11
• Browser Chrome
• Version newest

onHint prop or something similar

Hi,

I wonder if you would like to att a onHint/onTyping or a prop so that I can set the hint as a state in my code.

Is your feature request related to a problem? Please describe.
I want to autocomplete to the hinting text on enter, not o tab. I guess a lot of other people might have other reasons why they would like to know what the current hint is.

Describe the solution you'd like
A prop that gives me the hint text so I can save it to my own state.

Describe alternatives you've considered
A prop so I can decide what the key to autofill on. But I believe its more useful to know the current hint.

Styling Prop

Styling needs to be fixed

In my application which I have a predefined styling for my project, the Hint automatically overrides my styles and shorten the width of my input, so I dropped it.
Look into that and give a fix

Cant see the hint in dark mode

In dark mode or input with dark bg, the hint is not visible, and no option to add styles to the hints.

border-box box-sizing shortens width of user's input

This UI bug is noticed when Hint is compared to other input elements in the same form.
The Hint input always appears shorter than other input elements in the form

Incorrect formatting when using SPACe

Works well for single words, but hint formatting gettings messed up when you encounter a space in your hintdata.

Typing in 'PURPLE' shows 'PURPLE FLOWER' as the hint.
However, when you type the between purple and flower the formatting becomes messaged up.

Can this be fixed ASAP?

Customized priority order for hint

Let's say we have three strings 'P1 xyz', 'P2 xyz' and 'P3 xyz'. The default display order for hint is lexicographic, that is, 'P1 xyz' then 'P2 xyz' and then 'P3 xyz'. So, if a person types in P in the checkbox the hint would be 'P1 xyz'.

It would have been great if there would have been an option of customized priority order for suggestions. For example P2 then P1 then P3. So, if a user types in 'P' the hint should be 'P2 xyz'. If the user types in 'P1' only then the hint should be 'P1 xyz'.

How to get list of available items shown as a dropdown

I want to show a list of available items in a dropdown of sorts. So, if I have values such as "foo", "food", "foodie", and I type in fo the autocomplete hint will show foo in the search box (which is correct behavior), but I want to show all available options matching the substring "fo" in a nice little popup below. Is there a way we can get this feature incorporated?

String Only

error: to lowerCase() of undefined

I have an input with that of numbers, but its been rejected and throwing error.
You ought to accept numbers too and can then convert it to string behind the scenes so far all input will be strings

Allow styling of the Hint div itself

Describe the solution you'd like
I'd like an option that allows us to further style the Hint component itself, currently, I don't see a way of doing it so it remains at the fixed width which doesn't fit the current styling of my page

Describe alternatives you've considered
Tried wrapping it around with a div to style the width

Converting text to UPPER case seems to not format the hint correctly.

I need the Input to be all in uppercase. There is PROP passed to allow turning the UPPER / LOWERCASE on and off. The isActive is used to display the floating label. I am using this method to accomplish this:

  handleTextChange = (event) => {
    const input = event.target;
    const start = input.selectionStart;
    const end = input.selectionEnd;
  
    let newtext = input.value;
 
    console.log(newtext);

    if (this.props.uppercase) {
     this.setState(
       {value: input.value.toUpperCase()},
       () => input.setSelectionRange(start, end)
     );
   } else if (this.props.lowercase) {
     this.setState(
       {value: input.value.toLowerCase()},
       () => input.setSelectionRange(start, end)
     );
    } else {
     this.setState(
       {value: input.value }
     );
    }
   if (newtext !== '') {
       this.setState({
         isActive: true
       });
     } else {
       this.setState({
         isActive: false
       });
     }   
  }

The hintData has already been converted to UPPERCASE. It uses a preset ARRAY, no need to fetch data with AXIO.

NOTE: If you click outside the Input component and click back in the hint is displayed correctly.

Scroll the input to show the full hint when end of input box is reached

Hi,

Is your feature request related to a problem? Please describe.
Some of the hints I'm using are longer than the size of the input box itself so the end of the hint gets cut off. For this particular case I can't increase the width of the input box.

Describe the solution you'd like
A clear and concise description of what you want to happen.
It would be great if the input box automatically "scrolled" right to show the end of the hint.
I understand that the beginning of the sentence would get cut off instead, but that's okay.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
I'm currently trying to grab the hint from onHint prop and use the hint length to force scroll the input.

Additional context
Add any other context or screenshots about the feature request here.

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'

Describe the bug
It occurs when I use [email protected] which uses class component with Hint.

To Reproduce

<InputGroup>
        <Hint options={labels.map(label => label.group)}>
          <Input
            type="text"
            placeholder="Search"
            onChange={onChangeSearchHandler}
            value={search}
          />
        </Hint>
        <InputGroupAddon addonType="append">
          <InputGroupText>
            <SearchIcon />
          </InputGroupText>
        </InputGroupAddon>
      </InputGroup>

Screenshots
localhost-1609206487051.log

Desktop (please complete the following information):

• OS: Win 10
• Browser chrome
• Version 1.2.0

Additional context
Seems occurs due to class component because react strap uses innerRef which is referencing child DOM of class component.
We should support class component about injecting ref as a props of Hint.

<Hint options={...} childRef={childRef}>
  <Child innerRef={childRef} />
</Hint>

Double hint-click

Describe the bug
Clicking hint causes text to be filled incorrectly.
The issue is due to unmodifiedText not being set after a hint is clicked and filled inside of handleOnFill() inside of index.ts.

To Reproduce

1. Enter text into text box wrapped with Hint with options ['banana', 'banana!123']
2. Type the letters 'banan'
3. Click on autocomplete hint for 'banana'
4. Click on the new hint for 'banana!123'
5. Textbox text is now replaced with 'a!123' incorrectly

Expected behavior
When clicking on hints it will add to the text in the textbox correctly.

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Electron 17.0.1