Anlık düzenlenebilen tabloda kelime önerisi yaptırma

27-12-2021, 20:17:58

Merhaba, bir proje üzerine çalışıyorum. Projede tablonun içinde verilerimiz var ve bu verilerimizi düzenlemek istediğimizde, hangi veriyi düzenlemek istiyorsak o satıra tıklayıp istediğimiz düzenlemeyi yapabiliyoruz. Örnek görseli aşağıya ekledim:

Benim istediğim şey ise Ca yazarken aşağıda veritabanından çektiğim ca ile başlayan veya ca içeren verileri çekip tıklayıp bu alana yazdırmak. Bunu input select2 ile yapabiliyorum ancak td(satır) içerisine bir türlü entegre edemedim. Daha önce bu alanda çalışmış olan varsa yardımcı olabilir mi? Teşekkür ederim şimdiden.

27-12-2021, 21:01:14

#2

fatihemre

Bunu yapmanın bir çok yolu var. Ancak en kullanışlı yolu jqueryui autocomplete olur. Temanıza uyarlamanız, kendi html kodlarınıza gömebilmeniz açısından diğer alternatiflerine oranla daha kolay sonuç alırsınız. Tek yapmanız gereken tablodaki input'a bir seçici vermek. Örneğin ben bir örnek olarak input'a şöyle bir değer verdim:

<tr>
    <td><input type="checkbox"></td>
    <td>52</td>
    <td><input data-source="autocomplete_<?php echo $row['id']; ?>" type="text" class="form-control"></td>
    <td></td>
</tr>

Ardından jquery ui ile aşağıdaki javascript kodunu yazdım.

    $( function() {
        $( "[data-source]" ).autocomplete({
            source: "autocomplete.php",
            minLength: 2,
        });
    } );

Son olarak autocomplete.php dosyasından ise şu şekilde bir json döndürdüm:

[
    {"id":1,"label":"elma","value":"elma"},
    {"id":2,"label":"armut","value":"armut"},
    {"id":3,"label":"ceviz","value":"ceviz"}
]

Sonuç şu şekilde:

Buna alternatif olarak select2 ya da farklı bir kütüphane kullanılarak da örneklendirilebilir ancak dediğim gibi arayüzünüze uyarlamak için uğraşmanız gerekebilir. En kolay entegrasyon autocomplete ile yapılır.

27-12-2021, 21:11:25

#3

Caviz

fatihemre adlı üyeden alıntı: mesajı görüntüle

Bunu yapmanın bir çok yolu var. Ancak en kullanışlı yolu jqueryui autocomplete olur. Temanıza uyarlamanız, kendi html kodlarınıza gömebilmeniz açısından diğer alternatiflerine oranla daha kolay sonuç alırsınız. Tek yapmanız gereken tablodaki input'a bir seçici vermek. Örneğin ben bir örnek olarak input'a şöyle bir değer verdim:

<tr>
    <td><input type="checkbox"></td>
    <td>52</td>
    <td><input data-source="autocomplete_<?php echo $row['id']; ?>" type="text" class="form-control"></td>
    <td></td>
</tr>

Ardından jquery ui ile aşağıdaki javascript kodunu yazdım.

    $( function() {
        $( "[data-source]" ).autocomplete({
            source: "autocomplete.php",
            minLength: 2,
        });
    } );

Son olarak autocomplete.php dosyasından ise şu şekilde bir json döndürdüm:

[
    {"id":1,"label":"elma","value":"elma"},
    {"id":2,"label":"armut","value":"armut"},
    {"id":3,"label":"ceviz","value":"ceviz"}
]

Sonuç şu şekilde:

Buna alternatif olarak select2 ya da farklı bir kütüphane kullanılarak da örneklendirilebilir ancak dediğim gibi arayüzünüze uyarlamak için uğraşmanız gerekebilir. En kolay entegrasyon autocomplete ile yapılır.

Merhaba yanıtınız ve uğraşınız için çok teşekkür ederim öncelikle, td içine input alarak yazdırabiliyorum zaten sorun bu değil, sorun şu ki benim td lerin içinde bir input yok.

<td contenteditable="true" onBlur="veriKaydet(this,'hammaddeebat','<?php echo $id ?>')"
                        onClick="duzenle(this);"><?php echo $hammaddeebat ?></td>

Bu kodla td içini düzenleyebiliyorum. Bunun dışında dediğiniz gibi select2 ile de yapılabiliyor. özetlemek gerekirse td içine input olmadan autocomplete yaptırabilmek. Tekrardan teşekkür ederim.

27-12-2021, 23:44:19

#4

fatihemre

Caviz adlı üyeden alıntı: mesajı görüntüle

Merhaba yanıtınız ve uğraşınız için çok teşekkür ederim öncelikle, td içine input alarak yazdırabiliyorum zaten sorun bu değil, sorun şu ki benim td lerin içinde bir input yok.
Bu kodla td içini düzenleyebiliyorum. Bunun dışında dediğiniz gibi select2 ile de yapılabiliyor. özetlemek gerekirse td içine input olmadan autocomplete yaptırabilmek. Tekrardan teşekkür ederim.

Kodunuzu bilmeden ancak bu kadar cevap verebiliyorum. Tahmin yürüterek yardımcı olmak oldukça zor çünkü her yazılım kendine has kod barındırır, sizin de örneklendirdiğiniz gibi kodunuzda contenteditable kullanmışsınız. Yani td etiketine de benim kodda inputa yaptığım gibi data-source attribute'u verirseniz verdiğim örnek çalışır. Aşağıda ekran görüntülerini görebilirsiniz.