JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<div>
  <label for="local">공장검색 : </label>
  <input type="text" id="jquery-autocomplete">
</div>

<div style="margin-top:20px;">
  선택값:
  <div id="select-data" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

JavaScript

// 테스트를 위한 임시 데이터
var testData = [
	{id : '01', value : '서울공장', type : '시멘트', date : '1999-10-5'},{id : '02', value : '충주공장', type : '목재', date : '2003-11-3'},{id : '03', value : '부산공장', type : '페인트', date : '2022-5-19'}
];

$('#jquery-autocomplete').autocomplete({
		source : function(request, response) {
    	response( testData ); // 테스트를 위해 ajax 데이터 대신 테스트데이터로 처리하는 중
    	/*
      $.ajax({
		           url : '/localSearch.jsp'   
		         , type : 'POST'
		         , dataType: 'JSON'
		         , data : {term: request.term}	// 입력한 검색어
		         , success : function(data){
		             response( data ); ajax를 통해 받은 데이터, 자동검색에 들어간다
		         }
		         ,error : function(){
		             console.log('검색결과 없음');
		         }
		     });
      */
    }
		,focus : function(event, ui) { // 방향키로 자동완성단어 선택 가능하게 만들어줌(false로 선택하지 않으면 방향키 다운시 단어가 선택되어 버림)
				return false;
		}
		,minLength: 2// 최소 검색 글자수 (한글자로 하면 너무 민감하게 반응한다)
		,autoFocus : true // 검색되어 보여지는 첫 번째 항목이 자동으로 선택되도록 설정
		,delay: 150 // 키 입력이 발생한 시점과 검색이 수행된 시점 사이의 지연 시간 딜레이 값이 너무 작으면 민감하게 반응하여 검색이 잘 안됨 
		,select : function(evt, ui) { 
	      // 검색 성공 후 선택한 값 처리
        // 아이템 선택시 실행 ui.item 이 선택된 항목을 나타내는 객체, lavel/value/idx를 가짐
	      	
				var select_item = '';
        select_item = select_item + '<table>';
				select_item = select_item + '<td>' + ui.item.id + '</td>';
				select_item = select_item + '<td>' + ui.item.value + '</td>';
				select_item = select_item + '<td>' + ui.item.type + '</td>';
        select_item = select_item + '<td>' + ui.item.date + '</td>';
        select_item = select_item + '</table>';
				
				$('#select-data').append(select_item);
		 }
  });