Chapters

41 Chapters | 4:45:40 |

01

Form Type Class

9:11
02

Handling the Form Submit

8:44
03

Success (Flash) Messages

6:50
04

Bind Your Form to a Class

7:32
05

Field Types & Options

4:45
06

DateTimeType & Data "Transforming"

6:25
07

EntityType: Drop-downs from the Database

7:33
08

EntityType: Custom Query

5:27
09

HTML5 & "Sanity" Validation

6:19
10

Validation Constraints with @Assert

5:13
11

Form Rendering Functions: form_*

5:22
12

Form Rendering Variables

5:16
13

The Edit Form

7:18
14

Registration Form

7:15
15

Adding Extra "Unmapped" Fields

6:58
16

UniqueEntity & Validation Directly on Form Fields

6:40
17

Agree to Terms Database Field

6:03
18

Agree to Terms Checkbox Field

5:35
19

All about Form Themes

8:01
20

Form Theme Block Naming & Creating our Theme!

6:22
21

Form Theming & Variables

8:42
22

Form Theming a Single Field

4:07
23

Custom Field Type

6:24
24

Data Transformer

9:09
25

Custom Field: configureOptions() & Allowing Empty Input

4:42
26

Leveraging Custom Field Options

5:35
27

Autocomplete JavaScript

8:19
28

Autocomplete Endpoint & Serialization Group

5:26
29

Hooking up the AJAX Autocomplete

8:20
30

The buildView() Method

7:09
31

Form Type Extension

10:09
32

Tweak your Form based on the Underlying Data

8:35
33

Form Model Classes (DTOs)

9:59
34

Custom Validator

8:59
35

Setup: For Dependent Select Fields

6:41
36

Form Events & Dynamic ChoiceType choices

6:01
37

Dynamic Form Events

7:40
38

PRE_SET_DATA: Data-based Dynamic Fields

4:25
39

JS to Auto-Update the Select Options

10:18
40

Clear that Location Name Data

5:09
41

A bit of Security Cleanup

7:02

This tutorial has a new version, check it out!

> Symfony 4 > Symfony 4 Forms: Build, Render & Conquer!

Buy Access to Course

29.

Hooking up the AJAX Autocomplete

|

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Chapter

Next Chapter

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Login or register to check out the script

5 Comments

Sort By

Login or Register to join the conversation

dave 7 years ago

is there any way how to update the results in the table while typing in the search bar with ajax and symfony

|

weaverryan SFCASTS dave 7 years ago

Hey @dave!

In general, for a search bar, I would not use Symfony's Form component. It's just too simple of a situation (only one field and no validation errors), so creating a normal HTML input field and handling it manually in a controller will give you a lot of flexibility.

So, to answer your question, of course! The *how* depends entirely on how you're building your frontend. If you were using something like React to build the results in your table, then each time you type, you'd send an AJAX request, that AJAX request would return the current results based on that search in JSON, and in React, you would re-render using those results. There is also the DataTable JavaScript library, which would work in a very similar way: https://datatables.net/.

In all cases, in Symfony, you have an endpoint that is able to read the current search value and return the results based on that value. How you render that on the front-end depends on the JavaScript library.

Cheers!

|

Mike-Profile weaverryan 6 years ago edited

I have a similar question, in this example we override the configureDefaults to add a custom data- class with the url we want to submit the Ajax call to.

In the example of a global search bar (accessible from every page), like you said Ryan, it is a simple html form element, Symfony Forms is not used.

How would you pass the autocomplete url when Forms is not used?
I currently have this snippet inside my base.html.twig:


<script>
                let $searchbar_suggestion_url = "{{ path('searchbar_suggestions')|escape('js') }}";
            </script>

It feels a bit "unclean", because of its location (base.html.twig).

|

MolloKhan SFCASTS Mike-Profile 6 years ago edited

Hey Mike P.

Well, you could just use Symfony forms for that, or add a data-url HTML attribute to your form and then do the same thing Ryan did.

Cheers!

|

dave weaverryan 7 years ago

thanks Ryan

|

Symfony 4

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.1.3",
        "ext-iconv": "*",
        "composer/package-versions-deprecated": "^1.11", // 1.11.99
        "doctrine/annotations": "^1.0", // 1.10.2
        "doctrine/doctrine-bundle": "^1.6.10", // 1.10.2
        "doctrine/doctrine-migrations-bundle": "^1.3|^2.0", // v2.0.0
        "doctrine/orm": "^2.5.11", // v2.7.2
        "knplabs/knp-markdown-bundle": "^1.7", // 1.7.0
        "knplabs/knp-paginator-bundle": "^2.7", // v2.8.0
        "knplabs/knp-time-bundle": "^1.8", // 1.8.0
        "nexylan/slack-bundle": "^2.0,<2.2.0", // v2.0.0
        "php-http/guzzle6-adapter": "^1.1", // v1.1.1
        "phpdocumentor/reflection-docblock": "^3.0|^4.0", // 4.3.0
        "sensio/framework-extra-bundle": "^5.1", // v5.2.1
        "stof/doctrine-extensions-bundle": "^1.3", // v1.3.0
        "symfony/asset": "^4.0", // v4.1.6
        "symfony/cache": "^3.3|^4.0", // v4.1.6
        "symfony/console": "^4.0", // v4.1.6
        "symfony/flex": "^1.0", // v1.21.6
        "symfony/form": "^4.0", // v4.1.6
        "symfony/framework-bundle": "^4.0", // v4.1.6
        "symfony/property-access": "^3.3|^4.0", // v4.1.6
        "symfony/property-info": "^3.3|^4.0", // v4.1.6
        "symfony/security-bundle": "^4.0", // v4.1.6
        "symfony/serializer": "^3.3|^4.0", // v4.1.6
        "symfony/twig-bundle": "^4.0", // v4.1.6
        "symfony/validator": "^4.0", // v4.1.6
        "symfony/web-server-bundle": "^4.0", // v4.1.6
        "symfony/yaml": "^4.0", // v4.1.6
        "twig/extensions": "^1.5" // v1.5.2
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.0", // 3.0.2
        "easycorp/easy-log-handler": "^1.0.2", // v1.0.7
        "fzaninotto/faker": "^1.7", // v1.8.0
        "symfony/debug-bundle": "^3.3|^4.0", // v4.1.6
        "symfony/dotenv": "^4.0", // v4.1.6
        "symfony/maker-bundle": "^1.0", // v1.8.0
        "symfony/monolog-bundle": "^3.0", // v3.3.0
        "symfony/phpunit-bridge": "^3.3|^4.0", // v4.1.6
        "symfony/stopwatch": "^3.3|^4.0", // v4.1.6
        "symfony/var-dumper": "^3.3|^4.0", // v4.1.6
        "symfony/web-profiler-bundle": "^3.3|^4.0" // v4.1.6
    }
}

Previous Chapter

Next Chapter