autocomplete을 구현하기 위해
어려가지 프레임웤이 있지만
bootstrap을 써서 ui를 구성한 이상 bootstrap에서 지원되는 autocomplete를 찾다가
typeahead를 찾게 되었다 .
아래는 현재 작성된 코드다 js파일은 구글에서 검색해서 다운받으면 된다.
<script type="text/javascript" src="/Bootstrap/assets/js/bootstrap-typeahead.min.js"></script>
<form id="form1" runat="server">
<h2 class="title">파일업로드</h2>
<table class="table form">
<tbody>
<tr>
<th class="col-20">기업코드</th>
<td><input type="hidden" id="txtCompanySeq"/>
<input class="form-control typeahead" id="txtCompanyNm" type="text" placeholder="기업이름을 입력해 주세요!" /></td>
</tr>
<tr>
<th>제목</th>
<td><input class="form-control" id="txtTitle" type="text" placeholder="제목을 입력해 주세요!" />
</td>
</tr>
<tr>
<th>동영상 업로드</th>
<td id="container">
<div class="input-group">
<span class="space">
<button id="btnSelect" class="btn btn-success btn-sm">파일선택</button></span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div id="filelist" style="display:none;"></div>
</td>
</tr>
<tr>
<td><span class="badge text-danger text-left font-weight-bold">*PC/모바일 환경에서 최적화된 동영상 포맷으로 자동 변환합니다.<br />이 작업은 동영상 파일 용량에 따라 최대 10분 정도 소요될 수 있습니다.(동영상 파일 변환 이후 과정 오픈 가능)</span> </td>
<td class="text-left"> <span class="space">
<button id="btnUpload" class="btn btn-primary btn-sm">파일업로드</button></span></td>
</tr>
</tbody>
</table>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('input.typeahead').typeahead({
onSelect: function (item) {
console.log(item);
$('#txtCompanySeq').val(item.value);
},
ajax: {
url: "/Asp/Upload/CompanyInfoByAjax.aspx",
timeout: 500,
valueField : "company_seq",
displayField: "company_nm",
triggerLength: 1,
method: "post",
loadingClass: "loading-circle",
preDispatch: function (query) {
return {
search: query
}
},
preProcess: function (data) {
return data;
}
}
});
</script>