Search suggestion html input

Question

I actually working on a website-project. Behind my website, I´ve got a database with recipes.

Now to my problem: on the top of my page, I´ve got a textarea, with which it should be possible to search recipes in the database. My database gives back the following JSON-Object:

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

I´ve already parsed it that I only have the title:

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

    {
       var obj = jQuery.parseJSON(xmlhttp.responseText);
    var str="";
    $.each(obj.Data.Recipes, function(){
    str += this.ID + "<br/>";
    str += this.TITLE + "<br/><br/>";
        });
    document.getElementById("txtHint").innerHTML = str;
    document.getElementById("txtHint").style.border="1px solid #A5ACB2";
    }

What I don´t know now is, how to write the str string into a dropdown beneath the search-textarea. What type of element is this?

Answer 1

Here is a great example! On W3 Schools so there is all the code you would need to get this to work for your project!

I hope this helps you out :)