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

27/09/2016 - SYMFONY

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