jQuery UI Otomatik Tamamlama: nasıl serbest metin izin verilir

Question

Kullanıcının kendi varyantını eklemesine olanak tanımak istiyorum, yalnızca bir tanesini değil. Ancak, alana bir şey yazdığımda ve form gönderimlerimi GİRİŞ'e tıklayın.

Ardından, alanım için kilit olayını yakalamaya çalıştım, ancak bu durumda, okları kullanan önerilerinden bir varyant seçebilme ve ui parametresi tanımsız olduğu için anahtarları girebilme şansım var. Eğer preventDefault kullanabilirsiniz girmek üzerinde göndererek formu engellemek istiyorsanız

$('#field_id').on('keydown', function(event) { 
     if (event.keyCode == $.ui.keyCode.ENTER 
      || event.keyCode == $.ui.keyCode.NUMPAD_ENTER) 
     { 

      $('#field_id').trigger('autocompleteselect'); 
     } 
    }); 

    $('#field_id').autocomplete({ 
     source: [{"id":"20","value":"This is not mandatory decline reason"},{"id":"21","value":"You are have to be rejected"}] 
     minLength: 0 
    }).on('autocompleteselect', function(event, ui) { 
     // if I click on suggestion using mouse - everything is ok 
     // but not for ENTER-key choosing 

     // I want something like that: 
     if (ui.item) { 
       id = ui.item.id; 
       value = ui.item.value; 
     } else { 
       id = 'my_new_item'; 
       value = $(this).val(); 
     } 
     return false; 
    }); 

Answer 1

: otomatik tamamlama için

$(document).ready(function() { 
    $(window).keydown(function(event){ 
    if(event.keyCode == 13) { 
     event.preventDefault(); 
     return false; 
    } 
    }); 
}); 

, 'autocompleteselect' olayını tetiklerken basıldığında anahtarı girin farkında olacak Bir kullanıcı, önerilen öğeye giriş yaptığında 'otomatik tamamlama' işleyicisini iki kez ateşler. Bunu ve eksik olan ui parametresini önlemek için, yanıtı geri bildirimi kullanarak ve autofocus'u true olarak ayarlayarak kullanıcı girdisini önerilen öğe olarak eklemeyi deneyin.

Burada, otomatik tamamlamanın eşleşme olmadığında kullanıcı girdilerinin öneri listesine eklendiği bir örnek verilmiştir.

$('#field_id').autocomplete({ 
    source: [{ 
     "id": "20", 
      "value": "This is not mandatory decline reason" 
    }, { 
     "id": "21", 
      "value": "You are have to be rejected" 
    }], 
    minLength: 0, 
    autoFocus: true, 
    response: function (event, ui) { 

     if (ui.content.length == 0) { 
      ui.content.push({ 
       label: "New Search value: " + $(this).val(), 
       value: $(this).val(), 
       id: 0 
      }); 
     } 
    } 
}).on('autocompleteselect', function (event, ui) { 
    id = ui.item.id; 
    value = ui.item.value; 

    return false; 
}); 

Yukarıdakilerin bir jsfiddle örneğidir.

Bu yardımcı olur umarım.