Öneri öneri html girişi

Aslında bir web sitesi projesi üzerinde çalışıyorum. Web sitemin ardında, tarifleri olan bir veritabanı var.

Şimdi benim sorunumda: sayfamın üstünde, ben veritabanında tarifleri aramak mümkün olacak bir textarea var. Veritabanım aşağıdaki JSON-Object'i geri veriyor:

{"Data":{"Recipes":{"Recipe_7":{"ID":"7","TITLE":"Wurstel"},"Recipe_43":{"ID":"43","TITLE":"Wurstel2"}}},"Message":null,"Code":200}

Ben şimdiden onu sadece şu başlığa sahip olduğumu çözümledim:

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {
       var obj = jQuery.parseJSON(xmlhttp.responseText);
    var str="";
    $.each(obj.Data.Recipes, function(){
    str += this.ID + "
"; str += this.TITLE + "

"; }); document.getElementById("txtHint").innerHTML = str; document.getElementById("txtHint").style.border="1px solid #A5ACB2"; }

Şimdi bilmediğim şey, str dizesini arama-textarea'nın altındaki bir aşağıya yazmaktır. Bu ne tür bir eleman?

2
Bu bir seç öğesi mi?
katma yazar alex, kaynak
JQuery'yi kullandığınızdan, bir CSS seçici (örn: $ ("# txtHint")) kullanarak öğeyi seçebilir ve ardından döndürülen DOM öğesi jQuery'deki işlevleri çağırabilirsiniz.
katma yazar Connor, kaynak
.innerHTML 'den kaçınmaya çalışın. Bu kötülüktür.
katma yazar Raynos, kaynak
Bkz. jqueryui.com/demos/autocomplete/#remote-jsonp , bu uzak json verilerini alır ve öneriye ekler. Bence bu size yardımcı olabilir.
katma yazar Vijay, kaynak
Hayır, birşeyler ararken açılır menü gösterilmeli. "Canlı" olarak arama yapabileceğim işlev zaten yazılmıştır, sadece öğenin nasıl çağrıldığını bilmiyorum
katma yazar Harald, kaynak

2 cevap

İşte harika bir örnek! W3 Okulları 'nda, bunun için çalışmanız için gereken tüm kodlar vardır. proje!

Umarım bu size yardımcı olur :)

5
katma
Bağladığınız bu örnek, kötü kod ve kötü uygulamalarla doludur. Lütfen w3schools'u sevmeyin.
katma yazar Raynos, kaynak
Çözümün kötü olmadığını ya da bir şey olduğunu biliyorum. Sadece W3Schools'a bağlamanın iyi olmadığını bilmeni istiyorum. Sadece W3Schools'un içeriği güncellemediğine ve zaman zaman yanıltıcı olabileceğine dair farkındalık yaymaktır.
katma yazar Some Guy, kaynak
Bu sağlam bir çözümdür. Hangi "web sitesi" ne olursa olsun. Gönderiniz OP'ye yapıcı değil.
katma yazar Graeme Leighfield, kaynak
TAMAM. Teşekkürler Amaan :)
katma yazar Graeme Leighfield, kaynak
bir oylamaya neredeyse değmez. poster sorularına cevap verir ve ona projesinin nereye gideceği ve gideceği konusunda bir bağlantı sağlar. Hayır, "Bu, kullanmanız gereken mutlak% 100 kod."
katma yazar Graeme Leighfield, kaynak

https://github.com/httpcart/SuggestionsAndSearchJs kullanmayı deneyin. Her şey bir satırda çalışıyor

0
katma