{"action":"created","issue":{"url":"https://api.github.com/repos/KleeGroup/focus-components/issues/688","labels_url":"https://api.github.com/repos/KleeGroup/focus-components/issues/688/labels{/name}","comments_url":"https://api.github.com/repos/KleeGroup/focus-components/issues/688/comments","events_url":"https://api.github.com/repos/KleeGroup/focus-components/issues/688/events","html_url":"https://github.com/KleeGroup/focus-components/issues/688","id":117588672,"number":688,"title":"Autocomplete refactor","user":{"login":"Bernardstanislas","id":4435377,"avatar_url":"https://avatars.githubusercontent.com/u/4435377?v=3","gravatar_id":"","url":"https://api.github.com/users/Bernardstanislas","html_url":"https://github.com/Bernardstanislas","followers_url":"https://api.github.com/users/Bernardstanislas/followers","following_url":"https://api.github.com/users/Bernardstanislas/following{/other_user}","gists_url":"https://api.github.com/users/Bernardstanislas/gists{/gist_id}","starred_url":"https://api.github.com/users/Bernardstanislas/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Bernardstanislas/subscriptions","organizations_url":"https://api.github.com/users/Bernardstanislas/orgs","repos_url":"https://api.github.com/users/Bernardstanislas/repos","events_url":"https://api.github.com/users/Bernardstanislas/events{/privacy}","received_events_url":"https://api.github.com/users/Bernardstanislas/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/KleeGroup/focus-components/labels/Enhancement","name":"Enhancement","color":"84b6eb"}],"state":"open","locked":false,"assignee":{"login":"Bernardstanislas","id":4435377,"avatar_url":"https://avatars.githubusercontent.com/u/4435377?v=3","gravatar_id":"","url":"https://api.github.com/users/Bernardstanislas","html_url":"https://github.com/Bernardstanislas","followers_url":"https://api.github.com/users/Bernardstanislas/followers","following_url":"https://api.github.com/users/Bernardstanislas/following{/other_user}","gists_url":"https://api.github.com/users/Bernardstanislas/gists{/gist_id}","starred_url":"https://api.github.com/users/Bernardstanislas/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Bernardstanislas/subscriptions","organizations_url":"https://api.github.com/users/Bernardstanislas/orgs","repos_url":"https://api.github.com/users/Bernardstanislas/repos","events_url":"https://api.github.com/users/Bernardstanislas/events{/privacy}","received_events_url":"https://api.github.com/users/Bernardstanislas/received_events","type":"User","site_admin":false},"milestone":{"url":"https://api.github.com/repos/KleeGroup/focus-components/milestones/10","html_url":"https://github.com/KleeGroup/focus-components/milestones/Short%20term%20release","labels_url":"https://api.github.com/repos/KleeGroup/focus-components/milestones/10/labels","id":1385794,"number":10,"title":"Short term release","description":"","creator":{"login":"Bernardstanislas","id":4435377,"avatar_url":"https://avatars.githubusercontent.com/u/4435377?v=3","gravatar_id":"","url":"https://api.github.com/users/Bernardstanislas","html_url":"https://github.com/Bernardstanislas","followers_url":"https://api.github.com/users/Bernardstanislas/followers","following_url":"https://api.github.com/users/Bernardstanislas/following{/other_user}","gists_url":"https://api.github.com/users/Bernardstanislas/gists{/gist_id}","starred_url":"https://api.github.com/users/Bernardstanislas/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Bernardstanislas/subscriptions","organizations_url":"https://api.github.com/users/Bernardstanislas/orgs","repos_url":"https://api.github.com/users/Bernardstanislas/repos","events_url":"https://api.github.com/users/Bernardstanislas/events{/privacy}","received_events_url":"https://api.github.com/users/Bernardstanislas/received_events","type":"User","site_admin":false},"open_issues":25,"closed_issues":2,"state":"open","created_at":"2015-10-30T17:14:25Z","updated_at":"2015-11-18T16:33:23Z","due_on":null,"closed_at":null},"comments":4,"created_at":"2015-11-18T13:38:42Z","updated_at":"2015-11-18T16:56:38Z","closed_at":null,"body":"# Autocomplete specification\r\n\r\nAs discussed with @remigrange @JoanaDalmeida @durandx @JabX @Pandakls @pierr @Tommass, here is what has been agreed.\r\n\r\nThere will be **two components** for the autocomplete :\r\n - One is the equivalent of a **select**, with a dynamic list of selectable *options* fetched from a server.\r\n - The second is an inproved **text input** with a dynamic list of *suggestions* fetched from a server.\r\n\r\n## Components\r\n### Dynamic select\r\n\r\n```jsx\r\n<AutocompleteSelect\r\n    querySearcher={querySearcher}\r\n    keyResolver={keyResolver}\r\n    value={value} keyName='key'\r\n    labelName='label'\r\n    onChange={onChange}\r\n    {...otherProps}\r\n/>\r\n```\r\n\r\n - `querySearcher` : a function that will be called by the component with a `query` argument (the user input), and which must return a `Promise` giving the object\r\n```javascript\r\n{\r\n    data: [{key: 'key', label: 'label'}, {...}],\r\n    totalCount: XXX\r\n}\r\n```\r\n - `keyResolver`: a function that will be called by the component with a `key` argument (the currently selected key), and which must return a `Promise` giving the resolved `label` associated to the provided `key`\r\n\r\n#### Requirements\r\n\r\n- If the `value` prop is set, it is resolved by calling the `keyResolver` prop (the 'value' work is used everywhere in forms, it might lead to confusion here since it is in fact a key)\r\n\r\n### Input suggestion\r\n\r\n```jsx\r\n<AutocompleteText\r\n    querySearcher={querySearcher}\r\n    value={value}\r\n    onChange={onChange}\r\n    {...otherProps}\r\n/>\r\n```\r\n - `querySearcher` : a function that will be called by the component with a `query` argument (the user input), and which must return a `Promise` giving the object\r\n```javascript\r\n{\r\n    data: ['suggestion1', 'suggestion2', ...],\r\n    totalCount: XXX\r\n}\r\n```\r\n\r\n## Common requirements\r\n\r\n- the components should handle the `isRequired` prop\r\n- the components should raise errors in case of validation failure, controled by the `domain`'s `validator`\r\n- the server calls should be throttled, to avoid overwhelming it when the user is typing in the field\r\n\r\n## Inspiration\r\n\r\n![img_0138](https://cloud.githubusercontent.com/assets/4435377/11242718/c4e287b2-8e03-11e5-83c9-e1c133ae6e71.JPG)\r\n\r\n## Future evolutions\r\n\r\n- highlight handling with ElasticSearch backends\r\n- scrolling in the suggestions/options list, with partial loading from server"},"comment":{"url":"https://api.github.com/repos/KleeGroup/focus-components/issues/comments/157777546","html_url":"https://github.com/KleeGroup/focus-components/issues/688#issuecomment-157777546","issue_url":"https://api.github.com/repos/KleeGroup/focus-components/issues/688","id":157777546,"user":{"login":"pierr","id":286966,"avatar_url":"https://avatars.githubusercontent.com/u/286966?v=3","gravatar_id":"","url":"https://api.github.com/users/pierr","html_url":"https://github.com/pierr","followers_url":"https://api.github.com/users/pierr/followers","following_url":"https://api.github.com/users/pierr/following{/other_user}","gists_url":"https://api.github.com/users/pierr/gists{/gist_id}","starred_url":"https://api.github.com/users/pierr/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pierr/subscriptions","organizations_url":"https://api.github.com/users/pierr/orgs","repos_url":"https://api.github.com/users/pierr/repos","events_url":"https://api.github.com/users/pierr/events{/privacy}","received_events_url":"https://api.github.com/users/pierr/received_events","type":"User","site_admin":false},"created_at":"2015-11-18T16:56:38Z","updated_at":"2015-11-18T16:56:38Z","body":"@remigrange asks for two other behaviours:\r\n\r\n## What's wanted\r\n\r\n- Add infinite scroll on autocomplete results (ie pagination)\r\n- Be able to customize the auto complete rendering \r\n\r\n## Proposition 1\r\n\r\n- According to me there are not so many cases where the user will have too many suggestions in its autocomplete. The only case is when he starts typing in the input, what he has to to is be more precise in its query. What you can do (in this specific case) is send from the server  a large number of result  `200` and add a scroll in the component using CSS.(it does not change the specification of the component). In the too many result case, the component should display a too many results, please complete your query. I think this will solve alomost all comlex cases\r\n\r\n- The second demand, is a little more touchy. I think it is a really specific case (maybe a special autocomplete). We intend to have a really simple component for the auto complete. What you can do is customize the text of the suggestion on the server side when you build the response or on the client side.  You can do a custom list component for this case (a simple `<ul><li></li></ul>` where you put all what you need in the rendering. If I am wrong please don't hesitate to detail your demand. We can help you to build the suggestion for this case.\r\n\r\n## Proposition 2 (not the easiest)\r\n\r\nI think you demand came from the use of [select2](https://select2.github.io/), you can build a simple wrapper around it. But as it is a jQuery plugin the integration may be a pain. I wouldn't do it. I think the `AwesomePlete` autocomplete will work in most of your cases.\r\n\r\n"}}