Material-ui: [AutoComplete] Support array of objects for dataSource

[aweary]

I'd like to have more control over the values passed to <AutoComplete>. I purpose that we add support for objects and implement a prop like primaryKey that represents the property on the object used as in the <MenuItem/>.

Here's an example of what it might look like:

...
render() {
  const dataSource = [
    { label: "First Item", value: 1},
    { label: "Second Item", value: 2},
    { label: "Third Item", value: 3},
    { label: "Fourth Item", value: 4},
    { text: "Fifth Item", value: 5}
  ]label
return (
  <AutoComplete
    dataSource={dataSource}
    primaryKey='label'
    filter={(input, item) => item.value === input}
  />
)
}

Currently <AutoComplete/> does do a check for whether the dataSource items are objects, but it treats them as React components.

switch (typeof request) {
              case 'string':
                return (
                  <MenuItem
                    disableFocusRipple={this.props.disableFocusRipple}
                    innerDivStyle={{overflow: 'hidden'}}
                    key={index}
                    value={request}
                    primaryText={request}
                  />
                );
              case 'object':
                if (typeof request.text === 'string') {
                  return React.cloneElement(request.value, {
                    key: request.text,
                    disableFocusRipple: this.props.disableFocusRipple,
                  });
                }
                return React.cloneElement(request, {
                  key: index,
                  disableFocusRipple: this.props.disableFocusRipple,
                });
              default:
                return null;
            }

Since the type checking is already there, it would just be a matter of adding another check to see if the object is _not_ a React component, and using passing request[primaryKey] to a <MenuItem> instance.

If this is something that you feel would be worth implementing/supporting, I'd be happy to work on a PR.

[yongxu]

I had some thought about adding other properties such as disabled, allwaysVisible, index //allways show up at this index order, caseSensitive, filter, clickCallback or keyword // alternative search key. I am thinking about adding them.

Here is an example:

const dataSource = [
    { 
        text: "First Item", 
        value: 1,
        allwaysVisible: true,
        caseSensitive: false,
        index: 0 //always show as the first result
    },
    { 
        text: "Second Item", 
        value: 2,
        clickCallback: (index, item) => happyNewYear(item.text) //item.text ===  "Second Item"
    },
    { 
        text: "Third Item", 
        value: 3,
        disabled: true, //not clickable
        filter: thisFilterOverridesTheDefault
    },
  ]

[arnekolja]

I think passing an array of objects is absolutely necessary, as you often would have to re-arrange your items beforehand to adjust them for this field, and that's a large overhead (performance, coding).

Why not just adjust the AutoComplete field to take props like objectLabelKey and objectValueKey?

Given objects like

[
  {
    id: 1
    title: 'My object's title'
    anotherProperty: 'Value 123',
    ...
  },
  {
    id: 2
    title: 'My second object's title'
    anotherProperty: 'Value 124',
    ...
  }
]

And then:

<AutoComplete
  filter={myFilter}
  objectValueKey="id"
  objectLabelKey="title"
/>

[aweary]

@arnekolja I think something like objectValueKey or primaryText is necessary, but since you can pass a custom filter function I'd imagine you could just manage which props are filtered in there.

<AutoComplete
  filter{myFilter}
  objectLabelKey='title'
  filter={item => item.id === someValue}
/>

All <AutoComplete/> really needs to know is:

• What data to reference (dataSource)
• Which property to display in the label (primaryText/objectLabelKey)
• How to filter the data (filter)

[jgoux]

I agree,
I often need a "filterable Select" component for long lists of items, and I'd love to see this feature in MUI.
I used Angular's material autocomplete component before, and it's a really good feature. https://material.angularjs.org/latest/demo/autocomplete

[FranBran]

any progress on this? this definitly is a _must-have_!

[nathanmarks]

I think autocomplete results need to be 100% template-able

[aweary]

I'll get a PR going when I return from vacation! 🏖

[nathanmarks]

@Aweary This component may be refactored soon so don't spend too much time on it.

[stevewillard]

Is there any progress on the Autocomplete refactor? I'm interested in this feature.

[gor181]

Hello,

This would be a nice add-on. Now you can use filter to filter the results but how do we order them?
I made a simple POC filter which filters the data by checking how many matches there are in a string, so more precise results should be visible at the top of the list which isn't the case.

I'v tried to use onKeyUp with the custom filter (aside the <AutoComplete />) but it seems that when I pass the filtered dataSource new items do not appear inside the dropdown.

Seems that componentWillReceiveProps takes in consideration only the _searchText_ property, so there is no way to inject the new filtered and ordered dataSource.

Is there a supported way to order the dataSource when using _filter_ ?

Thanks,

[amangeot]

Hello, is there any news for this feature ?

That would be great to receive dataSource items instead of dataSource items' text in the filter props. I would love to do something like:

function filter (searchText, key) {
  if (searchText) return AutoComplete.caseInsensitiveFilter(searchText, key.text)
  // Displays favorites for empty searches
  else return key.isFavorite
} 

[mantagen]

Seems like this is solved by virtue of the dataSourceConfig option

See: http://www.material-ui.com/#/components/auto-complete

[oliviertassinari]

Closed by #4783