making autoComplete add non-existent items

UI Components for React
Post Reply
smartsoftware
Posts: 4
Joined: 19 Dec 2020, 16:21

26 Dec 2020, 00:31

Below is my code in which I automatically add the value entered in autocomplete in 2 seconds if there is no suggestions. However, this approach adds every single item typed there. Is there a clean and neat way of adding items only if there are no suggestions AND if the user presses Enter or Tab key?

I added the

Code: Select all

 if (event.originalEvent.keyCode === 13)
block to make it work but it seems I need to combine onKeyUp and completeMethod but the main problem is the parameters of those methods are totally different and therefore I can't call one in another. I would be pleased if I can get any suggestions.

Code: Select all

searchTags(event) {
        let filteredTags;
        console.log(event)
        setTimeout(() => {

            setTimeout(()=> {
               if (event.originalEvent.keyCode === 13){
                    if (!filteredTags || filteredTags.length === 0) {
                        let tags = [...this.state.merchandise.tags, event.query];
                        this.setState({
                            ...this.state,
                            merchandise: {...this.state.merchandise, tags: tags}
                        }, this.updateUpperState)
                    }
                }
            },2000)

            if (!event.query.trim().length) {
                filteredTags = [...this.state.tags];
            }
            else {
                filteredTags = this.state.tags.filter((tag) => {
                    return tag.toLowerCase().startsWith(event.query.toLowerCase());
                });
            }

            this.setState({ filteredTags: filteredTags },this.updateUpperState);
        }, 250);

    }

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests