Auto Complete

Venky commented 6 years ago

Hello,

Thanks for the update. I've taken a new update (v4.12.0), but I couldn't see any major code changes in the documentation, if the component's code got refactored can your team please update the documentation with the latest API

And will it contain the keyboard up and down arrow highlighting and default value selection as I mentioned earlier?

Please update on this

Thanks :)

Aliaksandr Andrasiuk staff commented 6 years ago

Hello,

You should delete your node_modules folder, then delete package-lock.json and use 'yarn' or 'npm install' command again. And then that should work.

Yes, this update includes the possibility to use 'up' and 'down' arrow keys and default value :)

Best regards,

Aliaksandr from MDB.

Venky commented 6 years ago

Hi,

Thanks for the solution.

I've tried the same approach in the previous versions 4.11.0 and 4.12.0 but the same is not working now in the current version 4.13.0.

I've tweaked the code a little bit, it's working fine now

I've a small improvement for the Autocomplete component. Can we've a search icon or a small button next to clear icon.

I've customized the component and achieved something like this

Enable both (clear and search icon/button) on user inputs something (same functionality as clear button enable and disable). It'll be useful in mobile resolutions or any touch devices. It would be great if this includes in further releases.

Thanks :)

Aliaksandr Andrasiuk staff commented 6 years ago

Hi,

It's a good idea, we will consider this :)

Best regards.

Venky commented 5 years ago

Hi,

Can we've any update on this

Thanks :)

Aliaksandr Andrasiuk staff commented 5 years ago

Hi, probably we will start work on this before the next release.

Thank you for your patience.

Best regards.

Venky commented 5 years ago

Hi,

Can we've any update on this

Thanks :)

Konrad Stępień staff commented 5 years ago

Hi @Venky,

Sorry for the long wait. In this component we have these properties:

  clear: PropTypes.bool,
  clearColor: PropTypes.string,
  clearSize: PropTypes.string,

You can set clear button, and also you can set for it size and color.

Please check https://mdbootstrap.com/docs/react/forms/autocomplete/ api tab.

Best regards, Konrad.

Venky commented 5 years ago

Hi @Konrad Stępień,

Thanks for the update. But this is not my exact point here, the requirement which I was mentioned about the Search Icon / Search Button next to the Clear button.

Please let me know for any clarifications on the same.

Thanks :)

Konrad Stępień staff commented 5 years ago

Hi @Venky,

I can suggest such a solution and implement it in the near future so that the icon serves as a submit button.

Is this a good solution for you? :)

Best regards, Konrad.

Aliaksandr Andrasiuk staff commented 6 years ago

Hi,

logValue serves to only show entered text in Autocomplete's input. To set state you should use componentDidMount method instead of logValue.

But I realized there is a problem in Autocomplete realization. Data isn't updating after receiving new props. It will be fixed in our upcoming release.

There is a workaround, for now, you can try using componentWillMount method instead of componentDidMount.

Check our upcoming release for this bug is fixed.

Best regards.

Venky commented 6 years ago

Hi,

I'm sorry I didn't get that context, I've tried onChange() event on the Autocpmplete component, but it didn't work, in the below code snippet how can I call an API on user input changes? and how can I get the updated data (array) and update the state

import React, { Component } from "react";
import {
    MDBContainer,
    MDBAutocomplete
} from "mdbreact";
import debounce from "lodash.debounce";
import axios from "axios";

class AutoComplete extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data: this.props.data
        };
        this.autoComplete = debounce(this.autoComplete, 500);
    }

    async autoComplete(text) {
        var _this = this;
        await axios.get("API_URL_WILL_GO_HERE", {
            headers: {
                "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
            }
        })
        .then((response) => {
            console.log(response);
            if (response.data.status_code === "200" && response.data.status_txt === "SUCCESS") {
                //Updating the state here with the API response which is an array of strings
                _this.setState({
                    data: response.data.data
                });
            }
        });
    }

    logValue = (value) => {
        console.log(value);
    }

    render() {

        return (

             <MDBContainer>

                <MDBAutocomplete
                    data={this.state.data}
                    placeholder="Choose your favorite state"
                    clear
                    id="input"
                    getValue={this.logValue}
                    onChange={(e) => this.autoComplete(e.target.value)}
                    //onKeyPress={(e) => this.autoComplete(e.target.value)}
                />

            </MDBContainer>

        );

    }

}

export default AutoComplete

Please let me know for any concerns on the same

Thanks :)

Aliaksandr Andrasiuk staff commented 6 years ago

Hi,

I will show the example when we first get data from the server and then work with this data.

First, you should get data from server and then store it in the state.

In the example below, I get data from https://jsonplaceholder.typicode.com/. I get array of objects ( users in this example).

For example, I want to use Autocomplete component for suggesting usernames.

Now, in data we have objects, so we should get the usernames from that object. For achieving this I use filterNames method. This method finds all usernames in our data and returns an array of usernames. Then we overwrite our data with this array of usernames(also you can just add another variable to the state to store usernames and you will always have the data fetched from server).

And now you can type in Autocomplete's input and get suggestions based on usernames.

import React, { Component } from "react";
import { MDBContainer, MDBAutocomplete } from "mdbreact";
import debounce from "lodash.debounce";
import axios from "axios";

class AutoComplete extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.data
    };
    // this.autoComplete = debounce(this.autoComplete, 500);
  }

  componentDidMount() {
    axios
      .get("https://jsonplaceholder.typicode.com/users/")
      .then(response => response.data)
      .then(data => this.setState({ data }))
      .then(() => this.setState({ data: this.filterNames(this.state.data) }))
      .then(() => console.log(this.state.data))
      .catch(error => console.log(error))
  }

  filterNames = data => {
    let userNames = [];

    data.forEach(element => {
      userNames.push(element.username)
    });

    return userNames;
  }

  logValue = value => {
    console.log(value);
  };

  render() {
    return (
      <MDBContainer>
        <MDBAutocomplete
          data={this.state.data}
          placeholder="Choose your favorite state"
          clear
          id="input"
          getValue={this.logValue}
          // onChange={(e) => this.autoComplete(e.target.value)}
          //onKeyPress={(e) => this.autoComplete(e.target.value)}
        />
      </MDBContainer>
    );
  }
}

export default AutoComplete;

Best regards.