Giriş formu için Jquery otomatik tamamlama, kaynak olarak Textpattern kategori listesini kullanma

Question

Bir tartışma sitesi oluşturmak için Textpattern CMS kullanıyorum - XHTML ve CSS ile Textpattern'in şablon dilini sıkı bir şekilde kavradım, ancak PHP ve Javascript kurbağamın biraz ötesinde.

Yeni bir konuya başlamak için giriş formunda, kullanıcıların 5.000'den fazla seçeneğin listesinden bir kategori seçmeleri gerekir. HTML select -type input öğesinin kullanılması çok kullanışsızdır, ancak çalışır. için bir çeşit Javascript sihrini kullanmak istiyorum, -type giriş elemanı kullanıcı girişi ve ekran eşleşmeleri veya mevcut kategorilerden otomatik tamamlama, gerekli seçeneğin value uygun veritabanı alanına aktarılması.

jquery için birkaç otomatik tamamlama eklentisi gördüm, ancak yönergeler Javascript'in nasıl çalıştığını anlamanızı gerektirir.

Yukarıda belirttiğim gibi, kategori listesini select-türü input öğesi olarak oluşturmam benim için kolay ve bu öğeyi CSS kullanarak gizleyebilirim. text -type giriş öğesindeki bir otomatik tamamlama mekanizması kullanarak seçim listesi girişini kontrol etmek mümkün mü? Bunu nasıl yaparım?

Answer 1

bir URL'den verilerini almaya otomatik tamamlama ayarlayabilirsiniz, bu yüzden bu Textpattern ile birkaç şık şekilde kullanılan görebilirsiniz.

otomatik tamamlama kullandığı dizi formatı aşağıdaki gibidir:

["example_one", "example_two", ... ] 

Eğer 5000+ unsurları olduğundan, sadece bu biçimi kullanarak bunları listeleyen bir sayfa oluşturmak isteyebilirsiniz:

Page Autocomplete: 
[ 
    <txp:article_custom form="array_form" ... /> 
] 

Form array_form: 
"<txp:title />", 

Belirli bir alandaki tüm öğeleri dahil etmek yerine bu sayfayı kullanmak için otomatik tamamlamanızı şu şekilde ayarla:

$("#example").autocomplete("<txp:link_to_home />Autocomplete"); 

Yüklemeyi hızlandırmak için bir önbellek eklentisi kullanabilirsiniz.

İşleri daha da hızlandırmak için, tam liste kullanmak yerine Textpattern arama işlevini custom display page ile birlikte kullanabilirsiniz. Otomatik Tamamlama'yı kurmanın bir yolu olabilir, böylece yeni bir karakter girildiğinde/kaldırıldığında, otomatik tamamlama yeni arama dizesiyle yeniden yüklenir.

Answer 2

DÜZENLEME: gizli alan

Yes option.value koymak Güncelleme, bu mümkün. Eğer şu html kodunu varsa Örneğin,:

<input type="text" id="myTextBoxId"></input> 
<!-- added hidden field to store selection option value --> 
<input type="hidden" id="myHiddenField" name="selectedCategory"></input> 
<select id="mySelectId" style="display: none"> 
    <option>Category 1</option> 
    <option>Category 2</option> 
    <option>...</option> 
</select> 

Bir dizide bu verileri koymak için aşağıdaki jquery kodu kullanabilirsiniz:

var categories = $.map($("#mySelectId option"), function(e, i) 
{ 
    return e; // Updated, return the full option instead its text 
}); 

Ve son olarak, this one gibi bir otomatik tamamlama eklentiyi kullanabilirsiniz :

$("#myTextBoxId").autocomplete(categories, 
{ 
    formatItem : function(item) { return item.text; } // Added 
}); 

Kontrol autocomplete plugin demo pageoptions sen (Otomatik Doldur ve mustMatch gibi) kullanabilirsiniz görmek için.

Eğer (sayfanız için jQuery js, otomatik tamamlama css & js, kod) Html başlığında bu konur yapmanız gereken:

<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" /> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.autocomplete.js"> 
</script> 
<script type="text/javascript"> 
    $(function() 
    { 
     // Updated script 
     var categories = $.map($("#mySelectId option"), 
      function(e, i) { return e; }); 
     $("#myTextBoxId").autocomplete(categories, 
     { 
      formatItem : function(item) { return item.text; } 
     }); 
     // Added to fill hidden field with option value 
     $("#myTextBoxId").result(function(event, item, formatted) 
     { 
      $("#myHiddenField").val(item.value); 
     } 
    }); 
</script> 

Tamam, kod sadece birkaç satır, ama ben "dizi için seç" öğesini beğenmedim. Mümkünse, kullanıcı girdisiyle eşleşen bir kategori listesi döndüren bir sayfa oluşturmanız gerekir (tekrar, örnekler için demo sayfasını kontrol edin, talihsiz bir şekilde, Textpattern ile size pek yardımcı olamam).

Tabii ki test etmedim, bir sorunuz varsa yorum yapın. DÜZENLEME: ama benim select yılında 5k öğelerle testi DID;)