inanzzz | Implementing auto suggestion feature for multiple fileds in a symfony application

In this example, we'll implement auto-suggestion feature while typing an user id or name in a single textbox. It will query both id and name fields and suggest us relevant records to choose from. List of suggested information will have id and name so you know what to choose.

Assuming that you have at least basic knowledge about symfony so I'm going to cut this example short.

Javascript and HTML parts

Javascript

Search starts after 3rd character which can be controlled with minLength option.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<script>
    $(function() {
        $('#user_id')
            .autocomplete({
                minLength: 3,
                source: $('#suggest_user_endpoint').val(),
                focus: function(event, ui) {
                    $('#user_id').val(ui.item.id);
                    return false;
                },
                select: function(event, ui) {
                    $('#user_id')val(ui.item.id);
                    $('#selected_user_name span').html(ui.item.name);
                    return false;
                }
            })
            .autocomplete('instance')._renderItem = function(ul, item) {
                return $('<li>')
                    .append('<div>'+item.id+'<br><em>'+item.name+'</em></div>')
                    .appendTo(ul);
        };
    });
</script>

HTML

<div class="ui-widget">
    <input type="text" id="user_id" name="user_form" />
</div>
<p id="selected_user_name"><label>User Name:</label> <span></span></p>
<input type="hidden" id="suggest_user_endpoint" value="{{ path('suggest_users') }}" />

Controller

/**
 * @param Request $request
 *
 * @Route("/suggest-users", name="suggest_users")
 * @Method("GET")
 *
 * @return JsonResponse
 */
public function suggestUsersAction(Request $request)
{
    $term = $request->query->get('term');
    $users = null;

    if ($term) {
        $users = $this->merchantService->suggestUsers($term);
    }

    $response = new JsonResponse();
    $response->setData($users);

    return $response;
}

Service

public function suggestUsers($term)
{
    return $this->userRepository->findLimitedBySearchTermOnIdOrName($term);
}

Repository

public function findLimitedBySearchTermOnIdOrName($term, $limit = 10)
{
    return $this->createQueryBuilder('u')
        ->select('u.id, u.name')
        ->andWhere('u.id LIKE :term OR u.name LIKE :term')
        ->setParameter('term', $term.'%')
        ->setMaxResults($limit)
        ->getQuery()
        ->getResult(Query::HYDRATE_SCALAR);
}

Example responses

Assuming that you typed e2c (as user id) in search textbox. As a result, you should get response like below.

Array
(
    [0] => Array
        (
            [id] => e2c000-111-222-333
            [name] => Robert DeNiro
        )
    [1] => Array
        (
            [id] => e2c999-444-555-666
            [name] => Al Pacino
        )
)

Assuming that you typed Al (as user name) in search textbox. As a result, you should get response like below.

Array
(
    [0] => Array
        (
            [id] => r125898-787-110-852
            [name] => Alain Delon
        )
    [1] => Array
        (
            [id] => e2c999-444-555-666
            [name] => Al Pacino
        )
)