Skip to content

Commit

Permalink
FEAT: Autocomplete
Browse files Browse the repository at this point in the history 
태그 검색 시, 자동 검색 기능 추가
  • Loading branch information
@rustic-snob
rustic-snob committed Jul 26, 2023
1 parent d0eb198 commit 17f7ea1
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 58 deletions.
10 changes: 9 additions & 1 deletion web/myapp/SERVICE/templates/SERVICE/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,14 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@300&family=Orbit&display=swap" rel="stylesheet">

<!-- jQuery UI CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />

<!-- jQuery and jQuery UI JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<title>Service Page</title>

<script>
Expand Down Expand Up @@ -50,7 +58,7 @@
<!-- <label for="site-search">Search the tag:</label> -->
<div class='search_tag'>
<input
type="text" style="font-family: 'Noto Sans KR', sans-serif;" class="flexible-textbox" id = 'input-tag' placeholder=" 검색할 태그를 입력해 주세요: 형식은 #tag"
type="text" style="font-family: 'Noto Sans KR', sans-serif;" class="flexible-textbox" id = 'input-tag' placeholder=" 검색할 태그를 입력해 주세요: 형식은 #tag"
/>
</div>
<!-- <img src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/icon/search.png"> -->
Expand Down
21 changes: 21 additions & 0 deletions web/myapp/static/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ body{
justify-content : center;
align-items: center;
margin-bottom: 15px;
font-size: 16px
}

#input-tag{
Expand All @@ -135,11 +136,31 @@ body{
margin-left: 10px;
margin-right: 10px;
margin-bottom: 7px;
padding-left: 20px;
border-radius: 10px;
background-color:rgba(248,249,250,1);
border: 1px solid black;
font-weight: bold;
}

#ui-id-1 {
font-weight: bold;
font-size: 16px;
border-radius: 10px;
}
.ui-menu-item-wrapper {
border-radius: 10px;
text-indent: 10px; /* Indent text here */
}
.ui-menu-item {
border-radius: 10px;
}
.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
background: #6693bc !important;
font-weight: bold !important;
color: #ffffff !important;
}

#add-tag{
width:95%;
height: 50px;
Expand Down
97 changes: 40 additions & 57 deletions web/myapp/static/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,28 @@ var userBookmark = [];
var tags = new Set();
var selectedTags = new Set();
var $ = jQuery;
window.onload = function() {

$(document).ready(function() {
// This part ensures the first character is always '#'
var placeholderText = "검색할 태그를 입력해 주세요: 형식은 #tag";
$("#input-tag").on("input", function() {
var val = $(this).val();
if (val && val[0] !== "#") {
$(this).val("#" + val);
} else if (!val) {
$(this).val("#");
}
}).on("focus", function() {
var val = $(this).val();
if (val === "") {
$(this).val("#");
}
}).on("blur", function() {
var val = $(this).val();
if (val === "#") {
$(this).val("");
}
}).attr("placeholder", placeholderText);

console.log(userBookmark)

Expand Down Expand Up @@ -43,6 +64,22 @@ window.onload = function() {
}
}

$(function() {
var tagArray = Array.from(tags);

$("#input-tag").autocomplete({
source: function(request, response) {
var results = $.ui.autocomplete.filter(tagArray, request.term);
response(results.slice(0, 10));
},
minLength: 2, // Show suggestions only after one character is typed
select: function(event, ui) {
// code to execute when a suggestion is selected
}
});
});


function selectTags(tag,tagElement){ //클릭으로 태그를 선택하는 함수

if (selectedTags.has(tag)) {
Expand Down Expand Up @@ -130,22 +167,10 @@ window.onload = function() {
}
html += '</td>';
html += '<td>' + '<div class="tags-block-container"></div>' + '</td>';
html += '<td><input type="checkbox" class="check_btn" ></td>';
html += '</tr>';
}
dynamicTbody.innerHTML = html;
showModalBtn();
// showCheckBtn();
var checkboxes = document.getElementsByClassName('check_btn');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('click', function() {
deleteRow(this);
showModal(userBookmark[i]);
collectAllTags();
showSelectedTags();
showRows();
});
}
showModalBtn()
}
function showSelectedRows() {
const rows = document.getElementById("bookmarks_whole").querySelectorAll('tr');
Expand Down Expand Up @@ -332,28 +357,6 @@ window.onload = function() {
modal.style.display = 'none';
}
}
function showCheckBtn(){
var rows = document.getElementById('bookmarks_whole').querySelectorAll('tr');
rows.forEach(row => {
var button = document.createElement('input');
// button.textContent = '>';
button.setAttribute('type', 'checkbox'); // 체크박스로 설정
button.className = 'check_btn';
// button.onclick = showModal;
// button.onclick = function() {
// // var bookmark = userBookmark[row.rowIndex - 1]; // Get the corresponding bookmark object
// // showModal(bookmark, userBookmark); // Pass the 'bookmark' object as an argument
// };
row.cells[3].appendChild(button);
});

}
function deleteRow(checkbox) {
if (checkbox.checked) {
var row = checkbox.parentNode.parentNode;
row.parentNode.removeChild(row);
}
}

// 삭제 및 추가 된 태그 정보를 서버로 전송하는 함수
function updateTag(updatedTags){
Expand Down Expand Up @@ -381,24 +384,4 @@ window.onload = function() {
console.error('Error:', error);
})
}

function deleteRow(checkbox) {
if (checkbox.checked) {
console.log("checked!")
var row = checkbox.parentNode.parentNode;
row.parentNode.removeChild(row);
}
}


}

// $('.check_all').click(function(){
// console.log('check');
// if($("input:checkbox[id='check_btn']").prop("checked")){
// $("input[type=checkbox]").prop("checked",true);
// } else{
// $("input[type=checkbox]").prop("checked",true);
// }

// });
});

0 comments on commit 17f7ea1

Please sign in to comment.