How to add onClick event on the options in Autocomplete Component(Material UI)?

user_15047497 0
Viewed 3177

How is possible to add onClick event on the options - i mean when u click the selected option i want to link somewhere, not to just put in the searchField(or textField)? I search really hard on the web, but i just cant find how to do that.

            <Autocomplete
              freeSolo
              classes={classes}
              options={searchItems}
              getOptionLabel={(option) =>
                option.title ? option.title : option.name
              }
              style={{ width: 300, borderRight: "none", borderLeft: "none" }}
              renderInput={(params) => {
                return (
                  <TextField
                    {...params}
                    variant="outlined"
                    fullWidth
                    placeholder="Search for movie, tv or person"
                    value={value}
                    onChange={(e) => handleChange(e)}
                  />
                );
              }}
            />
material-ui reactjs autocomplete
1 Answers

You need to move the onChange function inside the Autocomplete component as below:

<Autocomplete
      id="combo-box-demo"
      classes={classes}
      options={searchItems}
      getOptionLabel={(option) =>
            option.title ? option.title : option.name
          }
      style={{ width: 300, borderRight: "none", borderLeft: "none" }}
      onChange={(e, value) => console.log(e.target, value.title)}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />

Here is an example that I have created. When the onChange function in the Autocomplete component is triggered, it displays values on the console. According to the doc, onchange function here pass three props called event, value and reason.

user_117669470
Related