42 lines
1.3 KiB
HTML
42 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Typesense Autocomplete</title>
|
|
<style>
|
|
body { font-family: sans-serif; margin: 20px; }
|
|
#user-search-input { padding: 10px; font-size: 16px; width: 300px; margin-bottom: 5px; }
|
|
#suggestions-list {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
border: 1px solid #ccc;
|
|
border-top: none;
|
|
width: 310px; /* Match input width + padding */
|
|
}
|
|
#suggestions-list li {
|
|
padding: 10px;
|
|
cursor: pointer;
|
|
}
|
|
#suggestions-list li:hover {
|
|
background-color: #f0f0f0;
|
|
}
|
|
#selected-user { margin-top: 20px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>User Autocomplete</h1>
|
|
|
|
<input type="text" id="user-search-input" placeholder="Type a user name...">
|
|
<ul id="suggestions-list"></ul>
|
|
|
|
<div id="selected-user">
|
|
<p>Selected User ID: <span id="selected-user-id">N/A</span></p>
|
|
<p>Selected User Name: <span id="selected-user-name">N/A</span></p>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/typesense@2.0.3/dist/typesense.min.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html> |