JQuery nin autocomplete ini kullanmayı basitleştiren ve hızlandıran bir metod yazdım paylaşmak istedim.Üzerinde çok az çalıştığım için şu anda sadece basit işlev yapabiliyor.

<input autocomplete="true" dataUrl="<?=$currentUrl;?>/getUsers/" relatedField="userId" id="userName" name="userName" style="width:250px;" />

<input id="userId" type="hidden" name="userId" />

şeklinde 2 html input oluşturalım. autocomplete parametresi bizim için bu alanın autocomplete olduğunu gösterir yani bu alan ile işlem yaparken autocomplete çalışacak demektir.

dataUrl JSON datayı çekeceğiniz adresi belrteceğiniz kısım.Bu adrese bir ajax isteği gider.Dönen sonuç JSON formatında dönmelidir. Varsayılan olarak bir kod örneği veriyorum ki dizinin anahtar değerleri açık bir şekilde gözüksün diye

foreach ($allUsers as $user)
        {
            $data["id"] = $user["UserId"];
            $data["label"] = $user["firstName"]. " " .$user["surname"];
            $data["value"] = $data["label"];

            array_push($dataSource, $data);
        }
        echo json_encode($dataSource);

Gözüktüğü üzere 3 adet key var. id hidden input a yazacağım değer autocomplete içinde gözükecek değer value autocomplete alana yazılacak değer

Bu şekilde bir diziyi json_encode ile ekrana basalım.

Sonrasında sayfamızın başına ki bu global kullanılan bir js olsun ki ve tüm projede kullanılsın ki yaptığımız işin bir anlamı olsun :)

$(document).ready(function() {
$("input[autocomplete = true]").attr("id", function () {
    var dataUrl = $(this).attr("dataUrl");
    var relatedField = $(this).attr("relatedField");
    $(this).autocomplete({
        source: dataUrl+'?x',
        minLength: 3,
        select: function(event, ui) {
            id = ui.item.id;
            $("#"+ relatedField).val(id);
        }
    }); 
});
});

Şeklinde olan kodumuzu ekledik. Kısacası bu kod şu işi yapıyor. Yüklenen sayfada autocomplete="true" olan değerler için datasource url ine istekte bulunuyor.Dönen JSON için autocomplete i çalıştırıp seçme işleminde id değerini relatedfield alanına atıyor.

Umarım işinizi görür.Kolay gelsin...

Eline koluna sağlık. gayet kullanışlı olmuş