検索候補のHTML入力

私は実際にウェブサイトプロジェクトに取り組んでいます。私のウェブサイトの後ろに、私はレシピのデータベースを持っています。

今私の問題に:私のページの上に、私はテキストエリアを持っています、それはデータベースのレシピを検索することが可能でなければなりません。 私のデータベースは以下のJSON-Objectを返します:

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

私はすでにそれを解析しています、私はタイトルしか持っていません:

  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"; }

私が今知っているのは、str文字列をsearch-textareaの下のドロップダウンに書き込む方法です。どのタイプの要素ですか?

2
それは select 要素ですか?
追加された 著者 alex,
jQueryを使用しているので、CSSセレクタ(つまり$( "#txtHint"))を使用して要素を選択し、そのDOM要素の関数を呼び出してjQueryが返すだけです。
追加された 著者 Connor,
.innerHTML を避けてください。それは悪です。
追加された 著者 Raynos,
これを見てください、 jqueryui.com/demos/autocomplete/#remote-jsonp リモートのjsonデータを取得し、提案に追加します。私はこれがあなたを助けることができると思います。
追加された 著者 Vijay,
いいえ、何かを検索している間にドロップダウンが表示されるはずです。私が "生きている"検索できる機能は既に書かれていますが、私は要素がどのように呼ばれているのか分かりません
追加された 著者 Harald,

2 答え

ここに素晴らしい例があります! W3スクールには、あなたのためにこれを動作させるために必要なコードがすべてありますプロジェクト!

私はこれがあなたを助けることを願って:)

5
追加された
リンクした例は、悪いコードと悪い習慣でいっぱいです。 w3schoolsに気に入らないでください。
追加された 著者 Raynos,
私は解決策が悪いことではないことを知っています。私はあなたにW3Schoolsへのリンクがうまくいかないことを知らせています。 W3Schoolsがどのようにコンテンツを更新しないのかについての意識を広め、時折誤解を招く可能性があります。
追加された 著者 Some Guy,
これは固い解決策です。どちらの "ウェブサイト"に関係なくあなたの投稿はOPに建設的ではありません。
追加された 著者 Graeme Leighfield,
OK。ありがとうAmaan :)
追加された 著者 Graeme Leighfield,
投票に値することはほとんどありません。ポスターの質問に答えるとともに、どこに行き、自分のプロジェクトを進めるのかについてのリンクを提供します。いいえ、私は「これはあなたが必要とする絶対100%のコードです」と言っていませんでした。
追加された 著者 Graeme Leighfield,

https://github.com/httpcart/SuggestionsAndSearchJs を試してみてください。 すべてが1行で動く

0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript