D3v4 - Simple suggest β

D3で入力補完を行うサンプル

データ元

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<style>
.selected {
    background-color: #ccc;
}

.suggest-wrapper {
    position: relative;
}

#input{
    height: 25px;
    font-size: 16px;
    margin-bottom: 0px;
}
.suggest_output {
    position: absolute;
    width: 300px;
    max-height: 500px;
    overflow-y: scroll;
    margin-top:0px;
    padding: 0px;
    border: 1px solid black;
    background-color: #fff;
 }

.suggest_output li {
    font-size: 16px;
    list-style:none;
    margin-top: 0px;
    padding: 4px;
}
</style>

</head>

<body>
<p>都道府県／市区町村名を入力してください</p>

<div class="suggest-wrapper">
    <input id="input">
</div>
<p>漢字、かなで検索できます</p>

}

</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js