Repository: ant-design
Issue: New Select component prop "optionSearchLabelProp": describes the search value once an option is selected
Labels: Inactive

- [x] I have searched the [issues](https://github.com/ant-design/ant-design/issues) of this repository and believe that this is not a duplicate.

### What problem does this feature solve?
When an option is selected in a <Select mode="combobox" showSearch> component the options' JSON data may describe each option's `value` as well as its `label`, and when said option is selected, the `value` then appears as the search value.

What I would like to do is to allow for an `optionSearchLabelProp` prop that specifies which property within each option's JSON data would be used to populate the search value after selecting said option. The value of this prop would default to "value" for backwards-compatibility just like the `optionFilterProp` prop.

This feature would also allow for the use of "duplicate options" that would appear to use duplicated values but are actually duplicated labels and duplicated search labels. This would allow for the <Select> component's need for unique values to remain in place while also allowing for developers to provide multiple options to select the same type of data (options that use unique values, but that may be ultimately ignored by the developer using the component, referring instead to the option's custom data stored within its JSON).

As a positive side-effect of coding this, we can also introduce the `labelInValue` prop to be used when in "combobox" mode, which will allow users to provide labels and search labels for the selected option provided via the `value` or `defaultValue` prop.

Further, so that users are not confused by search labels that could change after being selected (and wondering which option they've selected), I propose a new prop `allowSearchLabelOnly`. Setting this prop to true would ensure that anytime the search field loses focus, the search value would revert to the last selected option's search label. Additionally, a CSS class (`${prefixCls}-selection-search-selects-option`) would be applied to the search field that would indicate if the search value is currently selecting an option. The selected option would also appear as selected from the provided options dropdown, but not when the search value is manually changed after making a selection (even if manually changed back to what the search value previously was). To revert back to selecting the previously selected option (before the search value was manually changed), the Escape key may be pressed while the search field has focus (or the option can be selected again via the options dropdown). The `onChange` handler would still get called when the search value changes (to maintain existing functionality) and as well as when the search value is reverted (due to setting `allowSearchLabelOnly` to true or by pressing the Escape key). The `onChange` handler would receive an empty JSON object for its second parameter when changing the search value but not selecting an option; whereas, it would receive the option's provided JSON data when actually selecting an option.

### What does the proposed API look like?
Below are some unit tests I've created to demonstrate how the search value would be expected to change (such as where "Central Pattern Generator" would appear in the search field instead of "api44:Central Pattern Generator")...

    const createSelectableOption = (apiId, apiSearchTerm, optionSearchLabelProp) => {
      let result = {
        value: `api${apiId}:${apiSearchTerm}`,
        label: (
          <div>
            <span className={`api-${apiId}-icon`} />
            <span className="api-search-term">{apiSearchTerm}</span>
          </div>
        ),
        miscellaneousData: `api${apiId}:${apiSearchTerm}:misc`,
      };

      if (optionSearchLabelProp) {
        result[optionSearchLabelProp] = apiSearchTerm;
      }

      return result;
    };

    it("should use the selected option's search label when specified", () => {
      const onChange = jest.fn();

      const optionSearchLabelProp = 'mySearchLabel';

      const wrapper = mount(
        <Select
          mode="combobox"
          optionSearchLabelProp={optionSearchLabelProp}
          options={[
            createSelectableOption(44, 'Central Pattern Generator', optionSearchLabelProp),
            createSelectableOption(43, 'Central Pattern Generator', optionSearchLabelProp),
            createSelectableOption(42, 'Central Pattern Generator', optionSearchLabelProp),
          ]}
          onChange={onChange}
          labelInValue
        />
      );

      // Select the first selectable option
      toggleOpen(wrapper);
      selectItem(wrapper, 0);
      expect(onChange).toHaveBeenCalledWith(
        expect.objectContaining({
          value: 'api44:Central Pattern Generator',
        }),
        expect.objectContaining({
          value: 'api44:Central Pattern Generator',
          mySearchLabel: 'Central Pattern Generator',
          miscellaneousData: 'api44:Central Pattern Generator:misc',
        })
      );
      expect(wrapper.find('input').props().value).toEqual('Central Pattern Generator');
    });


<!-- generated by ant-design-issue-helper. DO NOT REMOVE -->