Auto-Completion Text Box

as you type, the box gives you suggestions for accepted

by Taylor Lopez

HTML

<script src="https://cdn.rawgit.com/iAmMortos/JSConsole/master/console.min.js"></script>
<table>
  <tr>
    <td>
      <input type="text" id="g1-text" class="list-completion" list="g1-list" placeholder="Pok&eacute;mon Name"/>
    </td>
    <td>
      Pok&eacute;mon ID: <b><span id="g1-id"></span></b><br />
      resource_uri: <b><span id="g1-output"></span></b>
    </td>
  </tr>
</table>

CSS

html {
  font-family: Helvetica, Arial, sans-serif;
}
.list-completion {
  font-size: 16px;
  padding: 10px;
  border-radius: 5px;
  border: 2px #aaa solid;
  margin-bottom: 5px;
}
.list-completion.invalid {
  background-color: #fcc;
  color: red;
  border-color: red;
}

JavaScript

function main()
{
    dl1 = $("<datalist>").attr("id", "g1-list");
    
    g1.forEach(function(elem){
    	dl1.append($("<option>").attr("value", elem.name));
    });
    
    $("#g1-text").bind("input", function(){
        if (objlistContains(g1, "name", $(this).val().toLowerCase())) {
        		$(this).removeClass("invalid");
        		var item = getItemFromListWhere(g1, "name", $(this).val().toLowerCase());
            if (item) {
                $("#g1-id").text(item.id);
                $("#g1-output").text(item.resource_uri);
            } else {
                $("#g1-id").text("");
                $("#g1-output").text("");
            }
        }
        else {
            $(this).addClass("invalid");
            $("#g1-id").text("");
            $("#g1-output").text("");
        }
    });
    
    $("body").append(dl1);
}

function objlistContains(list, prop, value)
{
    for (var i = 0; i < list.length; i++)
    {
        var elem = list[i]
        if (elem[prop].indexOf(value) >= 0)
            return true;
    }
    return false;
}

function getItemFromListWhere(list, testProp, testVal) {
	for (var i = 0; i < list.length; i++) {
  	var elem = list[i];
    if (elem[testProp] === testVal) {
    	return elem;
    }
  }
  return null;
}

var g1 = 
[
    {
        "id": "1",
        "resource_uri": "https://pokeapi.co/api/v2/pokemon-species/1/",
        "name": "bulbasaur"
    },
    {
        "id": "2",
        "resource_uri": "https://pokeapi.co/api/v2/pokemon-species/2/",
        "name": "ivysaur"
    },
    {
        "id": "3",
        "resource_uri": "https://pokeapi.co/api/v2/pokemon-species/3/",
        "name": "venusaur"
    },
    {
        "id": "4",
        "resource_uri": "https://pokeapi.co/api/v2/pokemon-species/4/",
        "name": "charmander"
    },
    {
        "id": "5",
        "resource_uri": "https://pokeapi.co/api/v2/pokemon-species/5/",
        "name": "charmeleon"
    },
    {
        "id": "6",
        "resource_uri":...