uxrocket.autocomplete v1.7.0

UX Rocket Autocomplete

Autocomplete plugini, jQueryUI Autocomplete altyapısı kullanılarak geliştirilmiştir. Orjinal plugindeki özelliklerin tamamı kullanılabilir. Ayrıca, autocomplete olarak çalışacak alanlarda data tanımları ile de ayarlar değiştirilebilir.

<input type="text" class="auto-complete" />
<input type="text" class="auto-complete" data-type="image" />
<input type="text" class="auto-complete" data-type="category" />
<input type="text" class="auto-complete" data-type="tree" />
<input type="text" class="auto-complete" data-service="dataSource" />

{
    "itemList":[
        {
            "category":"A",
            "image":"image-01.jpg",
            "name":"Asp",
            "value": "A, Asp",
            "title": "Web Language",
            "id":"03",
            "url": "http://www.example.com"
        },
        {
            "category":"B",
            "image":"image-02.jpg",
            "name":"Basic",
            "value":"B, Basic",
            "title": "Desktop Language",
            "id":"04",
            "url": "http://www.sample.com"
        }
    ]
}

Örnek HandleBars Teması

var customList = {
                     wrap: '<ul></ul>',
                     item: '<li>' +
                             '<a {{#if url}}href="{{url}}"{{/if}}>' +
                                 '{{{name}}}' +
                                 '{{#if title}}' +
                                     '<br /><em>{{substr title 50}}</em>' +
                                 '{{/if}}' +
                             '</a>' +
                           '</li>'
                 }

Notlar

Metin girişi sırası çıkan listede data-type değerine göre farklı görünümler oluşturulabilir. Ön tanımlı temalara göre data-type değerleri aşağıdaki gibi olabilir;

• list, sadece metin olan liste görünümü
• image, metin ve resimden oluşan liste görünümü
• category, kategorilere bölünmüş liste görünümü
• tree, kategorilere bölünmüş resimli liste görünümü

Autocomplete pluginin sonuçları alacağı örnek json çıktısı yukarıdaki gibi olmalıdır. Servis'e bağlanılacak durumlarda Servis URL'i, JSON Objesi kullanılacak durumlarda Objenin Adı service değeri olarak tanımlanmalıdır. Gönderilen data-type değerine göre, listedeki ögeler için category, image alanları gönderilmeyebilir ya da boş gönderilebilir.

Seçim yapıldıktan sonra, metin alanına eklenecek metin, data içindeki value değeri ile tanımlanır. Kullanım ihtiyacınıza göre bu değeri, listedeki değerden farklı olarak tanımlayabilirsiniz. Tanımlanmadığı durumlarda, name değer kullanılmaktadır.

Tanımlar

Public Metodlar