Use two api within the same autocomplete

[pixsolution]

Hi there! with your package, can I use two api within the same autocomplete?

api for search by name: https://www.mydomain.com/api/searchuserL?name=${searchTerm} api for search by email: https://www.mydomain.com/api/searchuserL?email=${searchTerm}

as I apply it in the following code:

metodochecked() {
    if (this.state.cheked = true)
      return fetchData
    else 
      return fetchData2     
  }

    <Autocomplete
                  key={shortid.generate()}
                  style={baseStyles.input}
                    scrollToInput={ev=> { }}
                    handleSelectItem={(item, index) => {}}  
                    onDropdownClose={() => { }}
                    onDropdownShow={() => { }}
                    minimumCharactersCount={0}
                    highlightText
                    valueExtractor={item => item.email}
                    rightContent
                    rightTextExtractor={item => item.properties}
                    fetchData={async (searchTerm) => {
                    const response = await fetch(``https://www.mydomain.com/api/searchuserL?name=${searchTerm}`);
                    return await response.json();
                    }}
                    fetchData2={async (searchTerm) => {
                    const response = await fetch(``https://www.mydomain.com/api/searchuserL?email=${searchTerm}`);
                    return await response.json();
                    }}
                  />

and can I call inside the autocomplete that "metodochecked" that you see there? What I want to do is something like you see in the following image that I change the field if I press the checkbox

[PaitoAnderson]

Something like this would probably work:

 <Autocomplete
    key={shortid.generate()}
    style={baseStyles.input}
    scrollToInput={ev=> { }}
    handleSelectItem={(item, index) => {}}  
    onDropdownClose={() => { }}
    onDropdownShow={() => { }}
    minimumCharactersCount={0}
    highlightText
    valueExtractor={item => item.email}
    rightContent
    rightTextExtractor={item => item.properties}
    fetchData={async (searchTerm) => {
        if (this.state.cheked) {
            const response = await fetch(``https://www.mydomain.com/api/searchuserL?email=${searchTerm}`);
            return await response.json();
        } else {
            const response = await fetch(``https://www.mydomain.com/api/searchuserL?name=${searchTerm}`);
            return await response.json();
        }
    }}
/>

[pixsolution]

Thanks @PaitoAnderson I have tried with that but it is not returning the result of any of the 2 api, it is not taking the item. The code:

valueExtractor={() => {
                      if (this.state.cheked) {
                        item => item.email
                      }
                      else {
                        item => (item.name || item.lastname || item.second_lastname || item.second_name) 
                      }
                    }  } 

[pixsolution]

We managed to solve thanks anyway @PaitoAnderson Another thing we do not see how to do with your package and that has to do with this same issue is how to handle 2 placeholder?

[PaitoAnderson]

I wouldn't do anything fancy in the valueExtractor like this, instead i'd handle any differences in the api responses in the fetchData.

Something like this maybe:

<Autocomplete
    key={shortid.generate()}
    style={baseStyles.input}
    scrollToInput={ev=> { }}
    handleSelectItem={(item, index) => {}}  
    onDropdownClose={() => { }}
    onDropdownShow={() => { }}
    minimumCharactersCount={0}
    highlightText
    valueExtractor={item => item.value}
    rightContent
    rightTextExtractor={item => item.properties}
    fetchData={async (searchTerm) => {
        if (this.state.cheked) {
            const response = await fetch(``https://www.mydomain.com/api/searchuserL?email=${searchTerm}`);
            var data = await response.json();
            return data.map(x => { value: x.email });
        } else {
            const response = await fetch(``https://www.mydomain.com/api/searchuserL?name=${searchTerm}`);
            var data = await response.json();
            return data.map(x => { value: (item.name || item.lastname || item.second_lastname || item.second_name) });
        }
    }}
/>

[PaitoAnderson]

This doesn't work? placeholder={this.state.cheked ? 'Email' : 'Name'}