hangul-search
Version:
Json객체에서 한글 검색을 수행. 한글 초성 검색을 지원. Korean search within JSON objects. Supports Korean initial consonant search.
92 lines (77 loc) • 3.24 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hansearch live demo</title>
<script src="../src/index.js"></script>
</head>
<body>
<h1>hansearch Live Demo</h1>
<p><h3>Input your test json object below</h3></p>
<textarea id="jsonObject" style="width:100%" rows="23">
[
{
"title": "Javascript find, findIndex, filter",
"users": ["김정환", "홍길동", "강감찬", "아이유"],
"description": "구글 네이버 다음"
},
{
"title": "Javascript 직렬화(serialization)",
"users": ["골리앗", "이순신", "김길동"],
"description": "직렬화를 알아본다."
},
{
"title": "Javascript 템플릿 리터럴(Template literal)",
"users": ["James", "Tom", "David"],
"description": "고글 가글 고고씽"
},
{
"title": "별 헤매는 밤, *이 빛나는 밤에 ",
"users": ["J[ame]s", "대한민국(손흥민)", "[언제나/화이팅]"],
"description": "그래 '더' 잘 될거야"
}
]
</textarea>
<p><h3>Type keywords below</h3></p>
<input type="text" id="search-query">
<p><h3>Below is result : <span style="background-color:yellow;">hansearch(json, '<span name="userInput"></span>').mark()</span></h3></p>
<section id="search-results"><p class="no-results">Please enter a word or phrase above</p><p class="no-results">한글 초성 검색을 지원합니다. <br/><br/>ㄱ글 => 구글, 가글, 고글 등이 검색 결과에 나타납니다.</p></section>
<p><h3>Repository</h3></p>
<p><a href="https://github.com/hwantage/hansearch">https://github.com/hwantage/hansearch</a></p>
</body>
<script>
/* START :: keyup 이벤트 */
document.getElementById("search-query").addEventListener("keyup", function (event) {
const textarea = document.getElementById('jsonObject');
// Read the content of the textarea
const jsonText = textarea.value;
try {
// Parse the JSON text into a JavaScript object
const jsonObject = JSON.parse(jsonText);
const userInput = event.target.value;
document.getElementsByName("userInput")[0].innerText = userInput;
// Clear result area
document.getElementById("search-results").innerHTML = "";
if (userInput.trim() != "")
{
const result = hansearch(jsonObject, userInput).mark(); // here is point code
// append marked result
const searchResultsElement = document.getElementById('search-results');
const resultHtmlElement = document.createElement('pre');
resultHtmlElement.style.width = "100%";
resultHtmlElement.innerHTML = JSON.stringify(result, null, 2);
searchResultsElement.appendChild(resultHtmlElement);
}
else
{
document.getElementById("search-results").innerHTML =
'<p class="no-results">Please enter a word or phrase above</p><p class="no-results">한글 초성 검색을 지원합니다. <br/><br/>ㄱ글 => 구글, 가글, 고글 등이 검색 결과에 나타납니다.</p>';
}
} catch (error) {
document.getElementById("search-results").innerHTML =
'<br/><p class="no-results">Error parsing JSON:' + error.message + '</p>';
}
});
/* E N D :: keyup 이벤트 */
</script>
</html>