Create drop down on the botttom of the search box

[brdhunga]

From this one:
https://codepen.io/YoungElPaso/pen/RwGqEqq

`

            <a x-bind:active="false" x-bind:href="suggestion.item.directLink ? '#/somesite/'+suggestion.item.title:'#/search/'+suggestion.item.title" x-bind:class="{'p-2 flex block w-full rounded hover:red': true, 'bg-blue-500 hover:bg-blue-600--replace-with-icon-class!':suggestion.active}" href="#/somesite/A Farewell to Arms" class="p-2 flex block w-full rounded hover:red">
              <span x-text="suggestion.item.title">A Farewell to Arms</span>
              <svg x-show="suggestion.item.directLink" xmlns="http://www.w3.org/2000/svg" class="ml-2 w-5" viewBox="0 0 20 20" fill="currentColor">

            <a x-bind:active="false" x-bind:href="suggestion.item.directLink ? '#/somesite/'+suggestion.item.title:'#/search/'+suggestion.item.title" x-bind:class="{'p-2 flex block w-full rounded hover:red': true, 'bg-blue-500 hover:bg-blue-600--replace-with-icon-class!':suggestion.active}" href="#/search/Kenya" class="p-2 flex block w-full rounded hover:red">
              <span x-text="suggestion.item.title">Kenya</span>
              <svg x-show="suggestion.item.directLink" xmlns="http://www.w3.org/2000/svg" class="ml-2 w-5" viewBox="0 0 20 20" fill="currentColor" style="display: none;">

            <a x-bind:active="false" x-bind:href="suggestion.item.directLink ? '#/somesite/'+suggestion.item.title:'#/search/'+suggestion.item.title" x-bind:class="{'p-2 flex block w-full rounded hover:red': true, 'bg-blue-500 hover:bg-blue-600--replace-with-icon-class!':suggestion.active}" href="#/somesite/Star Wars" class="p-2 flex block w-full rounded hover:red">
              <span x-text="suggestion.item.title">Star Wars</span>
              <svg x-show="suggestion.item.directLink" xmlns="http://www.w3.org/2000/svg" class="ml-2 w-5" viewBox="0 0 20 20" fill="currentColor">

            <a x-bind:active="false" x-bind:href="suggestion.item.directLink ? '#/somesite/'+suggestion.item.title:'#/search/'+suggestion.item.title" x-bind:class="{'p-2 flex block w-full rounded hover:red': true, 'bg-blue-500 hover:bg-blue-600--replace-with-icon-class!':suggestion.active}" href="#/search/Death in the Afternoon" class="p-2 flex block w-full rounded hover:red">
              <span x-text="suggestion.item.title">Death in the Afternoon</span>
              <svg x-show="suggestion.item.directLink" xmlns="http://www.w3.org/2000/svg" class="ml-2 w-5" viewBox="0 0 20 20" fill="currentColor" style="display: none;">

            <a x-bind:active="false" x-bind:href="suggestion.item.directLink ? '#/somesite/'+suggestion.item.title:'#/search/'+suggestion.item.title" x-bind:class="{'p-2 flex block w-full rounded hover:red': true, 'bg-blue-500 hover:bg-blue-600--replace-with-icon-class!':suggestion.active}" href="#/search/Frog and Toad" class="p-2 flex block w-full rounded hover:red">
              <span x-text="suggestion.item.title">Frog and Toad</span>
              <svg x-show="suggestion.item.directLink" xmlns="http://www.w3.org/2000/svg" class="ml-2 w-5" viewBox="0 0 20 20" fill="currentColor" style="display: none;">

            <a x-bind:active="false" x-bind:href="suggestion.item.directLink ? '#/somesite/'+suggestion.item.title:'#/search/'+suggestion.item.title" x-bind:class="{'p-2 flex block w-full rounded hover:red': true, 'bg-blue-500 hover:bg-blue-600--replace-with-icon-class!':suggestion.active}" href="#/search/The Black Jacobins" class="p-2 flex block w-full rounded hover:red">
              <span x-text="suggestion.item.title">The Black Jacobins</span>
              <svg x-show="suggestion.item.directLink" xmlns="http://www.w3.org/2000/svg" class="ml-2 w-5" viewBox="0 0 20 20" fill="currentColor" style="display: none;">

`