JSFiddle - React, Tailwind, and code Playground

by Good Muyis

HTML

<input name="snear" class="snear" value="" placeholder="Where e.g. Abuja, Wuse" type="text">
    <button id="getValue">Value</button>

JavaScript

$( ".snear" ).autocomplete({
      source: [ "Asokoro District",
"Bude",
"Burun",
"Central Business District",
"Chafe",
"Chika",
"Dakibiya",
"Dakwo",
"Dei-Dei",
"Duboyi",
"Durumi",
"Dutse",
"Gaduwa",
"Galadimawa",
"Garki 1 District",
"Garki II District",
"Gudu",
"Guzape District",
"Gwagwa",
"Gwagwalada",
"Gwari",
"Gwarinpa",
"Idogwari",
"Idu",
"Jabi",
"Jahi",
"Jaite",
"Jukwoyi",
"Kaba",
"Kabusa",
"Kado",
"Kajini",
"Karma",
"Karsana",
"Karu",
"Katampe",
"Katampe Ext",
"Kaura",
"Ketti",
"Kubwa",
"Kuchigworo",
"Lokogoma",
"Lugbe",
"Mabuchi",
"Maitama District",
"Mamusa",
"Mpape",
"Nbora",
"Nyanya",
"Okanji",
"Purfun",
"Pyakasa",
"Sabo Gida",
"Saraji",
"Shertti cheche",
"Utako",
"Waru-Pouma",
"Wumba",
"Wuse District",
"Wuse II District",
"Wuye"],
    focus: function( event, ui ) {
        $( ".snear" ).val( ui.item.label );
        return false;
      },
      select: function( event, ui ) {
        $( ".snear" ).val( ui.item.label );
        $( ".snear" ).attr("data-value",ui.item.value);
        return false;
      }
    });