JQuery UI Otomatik Tamamla'yı seçip

Question

seçtikten sonra gizli bir alan doldurmak için kullanıcıyı zorla Hesaplar için otomatik tamamlama gerektiren birçok alan içeren büyük bir HTML formum var. Ben sınıfta AccountLookup ile bu alanları etiketlemek ve jQuery otomatik tamamlanması için kirli işlerini yapar: Bir kullanıcı bunu yalnızca etiketli giriş alanına ÖNCE gizli alanını doldurmak için gereken otomatik tamamlamada bir şey seçtiğinde, Şimdi

$(".AccountLookup").autocomplete({ 
    source: function (request, response) { 
     $.ajax({ 
      url: "Lookup.asmx/GetAccounts", 
      data: "{ 'Search': '" + request.term + "' }", 
      dataType: "json", 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      dataFilter: function (data) { return data; }, 
      success: function (data) { 
       response($.map(data.d, function (item) { 
        return { 
         value: item.Value 
        } 
       })) 
      }, 
      error: function (XMLHttpRequest, textStatus, errorThrown) { 
       alert(textStatus); 
      } 
     }); 
    }, 
    minLength: 3 
}); 

; muhtemelen şu gibi bir şey kullanma:

$(this).prev().val(item.Key); 

Bu işlevi nasıl ekleyebilirim? Ayrıca, bir kullanıcıyı otomatik tamamlamadan seçmeye nasıl zorlarım? (Tüm değerler önceden tanımlanmış, kullanıcı yenilerini eklemek mümkün değil.)

DÜZENLEME: Bildiğim kadarıyla DOM teftiş dan seçeneğini seçenek şu anda gizli form alanına dolduruyor anladığım kadarıyla.

select: function (event, ui) { 
    $(this).prev().val(ui.item.key); 
} 

Answer 1

$(".AccountLookup").autocomplete({ 
    /*...*/ 
}).result(function(event, item) { 
    $(this).prev().val(item.Key); 
}); 

Ayrıca saha doldurulur emin olmak için bir jQuery validate kullanabilirsiniz.

Answer 2

Seçim eylemi için, formatItem seçeneğini kullanmayı deneyin. Her bir sonucu, diğer metin kutusunu dolduracak bir onclick etkinliğine sahip olacak şekilde biçimlendirebilirsiniz.

Zorlama için otomatik tamamlama arasından seçim yapmak için mustMatch seçeneğini kullanmanız gerekir.

http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions

Answer 3

gücü için

 $("#ac").autocomplete({ 
      source: function (req, resp) { 
        //add code here... 
      }, 
      select: function (e, ui) { 
       $(this).next().val(ui.item.id); 
      }, 
      change: function (ev, ui) { 
       if (!ui.item) 
        $(this).val(""); 
      } 
     }); 

Answer 4

... Bu eski bir yazı olduğunu biliyorum --- ama (listeden bir öğe seçmek için kullanıcı zorlayarak) benzer bir sorunu çözmek için çalışırken karşıma çıkmıştı seçimi, Otomatik Tamamlama'nın

oldukça kısa bir süre önce bu aynı sorun koştu

 var availableTags = [ 
      "ActionScript", 
      "AppleScript" 
     ]; 
     $("#tags").autocomplete({ 
      source: availableTags, 
      change: function (event, ui) { 
       if(!ui.item){ 
        //http://api.jqueryui.com/autocomplete/#event-change - 
        // The item selected from the menu, if any. Otherwise the property is null 
        //so clear the item for force selection 
        $("#tags").val(""); 
       } 

      } 

     }); 

Answer 5

ait "change" event kullanabilir ve bazı sonrası onunla birlikte bana yardımcı oldu. Kodu değiştirdiğimden beri, geri döndüğüm bilgilerden birini doldurmak için bir veya daha fazla alan istediğim durumlar olduğunu fark ettim. Otomatik tamamlama seçiminde, bir fonksiyon ekledim.

select: function (e, ui) {ReSetField({'txtID':'id','txtPrice':'price' [,etc...]}, ui) } 

fonksiyonu "ResetFields" sonra FIELDNAMES ile eşleştirilmiş eleman isimlerinin JSON listesinde alır ve UI nesnesinde elemanları eşleşecek şekilde FieldNames kullanır. Değer daha sonra ui öğesinden alınabilir ve html öğesine eklenebilir. "fieldlist" gibi bir özellik olarak HTML öğesi haline "fieldlist" yapışmasını ve sonra tüm ComboBox elemanlarını bulmak için tek bir işlev kullanabilirsiniz "ComboBox" gibi bir sınıf kullanarak

function ReSetField(_flds, _vals) { 
    //Set up the flds to be reset with values passed in. 
    try { 
    if (_flds != undefined) { 
     if ($.type(_flds) == 'string') { 
     _flds = JSON.parse(_flds); 
     }; 
     var _fld = null; 
     var _val = ''; 
     $.each(_flds, function (index) { 
     if (index.length > 0) { 
      _fld = '#' + index; //Set the forms field name to set 
      _val = _flds[index]; //Pick up the field name to set the fields value 
      $fld = $(_fld); 
      $fld.val(_vals.item[_val]); //Set the fields value to the returned value    
      } 
     } 
     }) 
    }; 
    } 
    catch (e) { 
    alert('Cannot set field ' + _fld + '.'); 
    } 
} 

Otomatik tamamlamayı, bir formdaki 2 veya daha fazla arama işlemek için gereken kod miktarını azaltan bir formda ayarlayın.