mirror_js/flexsearch
1
0
Fork 0
mirror of https://github.com/nextapps-de/flexsearch.git synced 2025-08-26 07:15:36 +02:00
Code Issues Releases Wiki Activity

update demo auto-complete

Browse Source
This commit is contained in:
Thomas Wilkerling
2025-03-25 21:15:27 +01:00
parent 718b73ecd0
commit 626bb99e3c
1 changed files with 114 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
demo/autocomplete.html
View File

@@ -44,12 +44,12 @@
top: 50px; top: 50px;
} }
#suggestions div{ #suggestions div{
padding: 10px 0; padding: 10px 8px;
margin: 0 8px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
width: calc(100% - 16px);
} }
#suggestions b{ #suggestions b{
color: blue; color: blue;
@@ -59,17 +59,18 @@
td, td,
tr, tr,
input{ input{
width: 97%; width: 98%;
} }
} }
</style> </style>
</head> </head>
<body> <body>
<span style="color: #000; float: right">(iterate through result by arrow keys)</span>
<table> <table>
<tr> <tr>
<td style="position: relative"> <td style="position: relative">
<input type="text" id="autocomplete"> <input type="text" id="autocomplete">
<input type="text" id="userinput" placeholder="Search by movie title ..."> <input type="text" id="userinput" autocorrect="off" spellcheck="false" autocomplete="off" placeholder="Search by movie title ...">
</td> </td>
</tr> </tr>
</table> </table>
@@ -79,40 +80,48 @@
import { Document, Charset } from "https://cdn.jsdelivr.net/gh/nextapps-de/flexsearch@0.8.1/dist/flexsearch.bundle.module.min.js"; import { Document, Charset } from "https://cdn.jsdelivr.net/gh/nextapps-de/flexsearch@0.8.1/dist/flexsearch.bundle.module.min.js";
import data from "https://cdn.jsdelivr.net/gh/nextapps-de/flexsearch@0.8.1/demo/data/movies.js"; import data from "https://cdn.jsdelivr.net/gh/nextapps-de/flexsearch@0.8.1/demo/data/movies.js";
(function(){ // for "Result Highlighting" it requires the usage of a Document Index
// also when just adding id-content-pairs to a single index
const index = new Document({ const index = new Document({
// the cache is a perfect addition
// for an instant search on keypress
cache: true, cache: true,
document: { document: {
// it requires storing the documents
store: true, store: true,
id: "id",
index: [{ index: [{
field: "title", field: "title",
charset: Charset.LatinSimple, charset: Charset.LatinSimple,
// a forward tokenizer is minimum
// required by an instant search
tokenize: "forward" tokenize: "forward"
}] }]
} }
}); });
for(var i = 0; i < data.length; i++){ for(let i = 0; i < data.length; i++){
index.add({ // pass a flat pseudo document when using
id: i, // result highlighting on plain string inputs
index.add(i, {
title: data[i] title: data[i]
}); });
} }
var suggestions = document.getElementById("suggestions"); const suggestions = document.getElementById("suggestions");
var autocomplete = document.getElementById("autocomplete"); const autocomplete = document.getElementById("autocomplete");
var userinput = document.getElementById("userinput"); const userinput = document.getElementById("userinput");
let results;
let iterate = 0;
userinput.addEventListener("input", show_results, true); userinput.addEventListener("input", show_results, true);
userinput.addEventListener("keyup", accept_autocomplete, true); userinput.addEventListener("keyup", accept_autocomplete, true);
userinput.addEventListener("keydown", iterate_autocomplete, true);
suggestions.addEventListener("click", accept_suggestion, true); suggestions.addEventListener("click", accept_suggestion, true);
function show_results(){ function show_results(){
var value = this.value; let value = this.value;
var results = index.search({ results = index.search({
query: value, query: value,
limit: 25, limit: 25,
suggest: true, suggest: true,
@@ -121,9 +130,10 @@
}); });
results = results[0] || results; results = results[0] || results;
results = results.result || results; results = results.result || results;
iterate = 0;
var entry, childs = suggestions.childNodes; let entry, childs = suggestions.childNodes;
var i = 0, len = results.length; let i = 0, len = results.length;
for(; i < len; i++){ for(; i < len; i++){
@@ -138,15 +148,42 @@
} }
while(childs.length > len){ while(childs.length > len){
suggestions.removeChild(childs[i]) suggestions.removeChild(childs[i]);
} }
var first_result = data[results[0]]; iterate_autocomplete()
var match = first_result && first_result.toLowerCase().indexOf(value.toLowerCase()); }
function iterate_autocomplete(event){
suggestions.childNodes[iterate] &&
(suggestions.childNodes[iterate].style.backgroundColor = "");
if(event){
const key = event.key;
if(key === "ArrowUp"){
if(iterate > 0){
iterate--;
}
event.preventDefault();
}
else if(key === "ArrowDown"){
if(iterate < results.length){
iterate++;
}
event.preventDefault();
}
}
let value = userinput.value;
let first_result = results && results[iterate] && data[results[iterate].id];
let match = first_result && first_result.toLowerCase().indexOf(value.toLowerCase());
if(first_result && (match !== -1)){ if(first_result && (match !== -1)){
autocomplete.value = value + first_result.substring(match + value.length); autocomplete.value = value + first_result.substring(match + value.length);
autocomplete.current = first_result; autocomplete.current = first_result;
suggestions.childNodes[iterate] &&
(suggestions.childNodes[iterate].style.backgroundColor = "rgb(0 0 255 / 10%)");
} }
else{ else{
@@ -157,25 +194,19 @@
function accept_autocomplete(event){ function accept_autocomplete(event){
if((event || window.event).keyCode === 13) { if((event || window.event).keyCode === 13) {
this.value = autocomplete.value = autocomplete.current; this.value = autocomplete.value = autocomplete.current;
suggestions.textContent = "";
} }
} }
function accept_suggestion(event){ function accept_suggestion(event){
var target = (event || window.event).target; let target = (event || window.event).target;
userinput.value = autocomplete.value = target.textContent; userinput.value = autocomplete.value = target.textContent;
suggestions.textContent = "";
while(suggestions.lastChild){
suggestions.removeChild(suggestions.lastChild);
}
return false; return false;
} }
}());
</script> </script>
</body> </body>
</html> </html>