Skip to content

[Autocompleter] New Ajax-powered, autocomplete component #330

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 9, 2022

Conversation

weaverryan
Copy link
Member

@weaverryan weaverryan commented Jun 6, 2022

Q A
Bug fix? no
New feature? yes
Tickets none
License MIT

Hi! A new component! One I've wanted for a LONG time. In short, it creates things that look like this, where the autocomplete search is backed by Ajax.

ux-autocomplete-animation

Big thanks to EasyAdmin, whose AssociationField heavily inspired this.

  • We could possibly avoid the requirement of creating a separate class for Ajax autocomplete by using signed URLs. However, this would only work for "simpler" fields - e.g. if you had a custom query_builder (or perhaps other options that we might not want to include in the URL, like security), then you would still be required to have the extra class. It's something to explore.

Cheers!

Recipe: symfony/recipes#1094

use Symfony\Component\Uid\Ulid;
use Symfony\Component\Uid\Uuid;

class EntitySearchUtil
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Most of the code in this directory - including this file - are taken directly from EasyAdmin. Hence the already-mature-looking code.

@seb-jean
Copy link
Contributor

seb-jean commented Jun 6, 2022

G R E A T 💯
Would using https://github.com/afcapel/stimulus-autocomplete be better?
In particular to reuse the controller :
https://github.com/afcapel/stimulus-autocomplete/blob/main/src/autocomplete.js

@weaverryan
Copy link
Member Author

Apparently, I just tripped over my keyboard :)

Would using https://github.com/afcapel/stimulus-autocomplete be better?

Tom Select (and this package) is focused on transforming <select> elements vs creating a generic "autocomplete" (e.g. a search bar where you have HTML results before). If you have that use-case, you can use that library, or live components where it's super easy to create this type of thing ("search bar where results load as you type").

Copy link
Contributor

@tgalopin tgalopin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great, thanks Ryan!

@@ -17,7 +17,8 @@
"@babel/preset-env": "^7.15.8",
"@babel/preset-react": "^7.15.8",
"@babel/preset-typescript": "^7.15.8",
"@rollup/plugin-node-resolve": "^13.0.0",
"@rollup/plugin-commonjs": "^22.0.0",
"@rollup/plugin-node-resolve": "^13.0.6",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this bump needed? The changelog doesn't seem to be related, but I may be wrong.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yea, it was - when I brought in commonjs, it gave me an error that said that 13.0.6 was required. A bit specific... but that was the reason :)

class CustomProductAutocompleter implements EntityAutocompleterInterface
{
public function __construct(
private RequestStack $requestStack
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Single line

@weaverryan weaverryan merged commit b5c36bd into symfony:2.x Jun 9, 2022
@weaverryan weaverryan deleted the autocompleter branch June 9, 2022 14:14
Comment on lines +78 to +88
public function mapDataToForms($data, $forms)
{
$form = current(iterator_to_array($forms, false));
$form->setData($data);
}

public function mapFormsToData($forms, &$data)
{
$form = current(iterator_to_array($forms, false));
$data = $form->getData();
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what does this do?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants