JSFiddle - React, Tailwind, and code Playground
HTML
<div id="divInputFac" runat="server">
<span id="spanFac">Choose a facility (start typing in the name). </span>
<br />
<input type="text" id="Text2" class="textbox" value="" name="q" size="20%" />
</div>
CSS
body
{
font-family:arial, tahoma, times;
font-size:18px;
background-color:#CCFF99;
top:2px;
}
.ui-autocomplete.ui-menu{ background-color:White ; list-style-image:none;}
.ui-autocomplete.ui-menu a.ui-state-hover { background-color:yellow }
li
{
margin-bottom:20px;
}
.textbox
{
height:30px;
width:90%;
font-size: 1em;
}
JavaScript
$(function() {
a = $('#Text2').autocomplete({
source: function(req, response) {
var re = $.ui.autocomplete.escapeRegex(req.term);
var matcher = new RegExp("^" + re, "i");
response($.grep(LocsPrivate, function(item) {
return matcher.test(item.label);
}));
},
minLength: 0, autoFocus: true ,
select: function(event, ui) {
AutoCompleteSelectionHandler2(event, ui)
}
});
});
function AutoCompleteSelectionHandler2(event, ui) {
var selectedDdlItem = ui.item;
var tbLoc = $get('<%= tbHidLoc.ClientID %>');
tbLoc.value = selectedDdlItem.pkey;
var selectedLoc = $get('<%= tbSelected.ClientID %>');
selectedLoc.value = selectedDdlItem.label;
var lblChose = $get('spanFac');
lblChose.innerHTML = "You selected: " + selectedLoc.value;
getLocation();
}
var LocsPrivate =
[
{ pkey: "895", label: "Abbydon Care & Rehabilitation Center of New Jersey" },
{pkey:"886", label:"Acuity Hospice and Endoscopy & Surgical Center Hospital of New Jersey"},
{pkey:"333", label:"Acutomatic Endoscopy & Surgical Center"},
{pkey:"942", label:"Automatic Services International Day Care & Rehabilitation Center of New Jersey"},
{pkey:"970", label:"Acutomatic Surgical Arts Center Rehabilitation Center of New Jersey"},
{pkey:"1058", label:"AllJersey Community for Senior Living-AL"},
{pkey:"1057", label:"AllJersey Community for Senior Living-LTC"},
{pkey:"972", label:"AllJersey Plastic Surgery Rehabilitation Center of New Jersey"},
{pkey:"973", label:"Ambulatory Medical Center of New Jersey, LLC"},
{pkey:"670", label:"Ancora Psychiatric Hospital"}
]