inanzzz | Symfony ile birden fazla alan içinde arama yapmak için otomatik tamamlama özelliğini kullanmak

Bu örneğimizde, tek bir textbox ile birden fazla alan içinde (id veya name) arama yapmak için otomatik tamamlama özelliğini kullanacağız. Veritabanında aynı anda id ve name alanlarını sorgulayıp, ilgili kayıtları geri döndüreceğiz. Geri döndürülen bilgi hem id hem de name bilgilerini barındıracak.

Symfony hakkında en azından temel bir bilgi sahibi olduğunuzu varsayıp, örneği kısa keseceğim.

Javascript ve HTML bölümleri

Javascript

Arama işlemi 3. karakterden sonra başlıyor. Bunu minLength seçeneği ile kontrol edebilirsiniz.

<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);
}

Örnek sonuçlar

Arama texboxuna e2c (user id) yazdığınızı varsayıyorum. Sonuç olarak aşağıdakine benzer bir cevap alabilirsiniz.

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

Arama texboxuna Al (user name) yazdığınızı varsayıyorum. Sonuç olarak aşağıdakine benzer bir cevap alabilirsiniz.

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