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

197
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,103 +80,133 @@
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({
// the cache is a perfect addition
// for an instant search on keypress
cache: true,
document: {
// it requires storing the documents
store: true,
index: [{
field: "title",
charset: Charset.LatinSimple,
// a forward tokenizer is minimum
// required by an instant search
tokenize: "forward"
}]
}
});
const index = new Document({ for(let i = 0; i < data.length; i++){
cache: true, // pass a flat pseudo document when using
document: { // result highlighting on plain string inputs
store: true, index.add(i, {
id: "id", title: data[i]
index: [{
field: "title",
charset: Charset.LatinSimple,
tokenize: "forward"
}]
}
}); });
}
for(var i = 0; i < data.length; i++){ const suggestions = document.getElementById("suggestions");
index.add({ const autocomplete = document.getElementById("autocomplete");
id: i, const userinput = document.getElementById("userinput");
title: data[i] let results;
}); let iterate = 0;
userinput.addEventListener("input", show_results, true);
userinput.addEventListener("keyup", accept_autocomplete, true);
userinput.addEventListener("keydown", iterate_autocomplete, true);
suggestions.addEventListener("click", accept_suggestion, true);
function show_results(){
let value = this.value;
results = index.search({
query: value,
limit: 25,
suggest: true,
enrich: true,
highlight: "<b>$1</b>"
});
results = results[0] || results;
results = results.result || results;
iterate = 0;
let entry, childs = suggestions.childNodes;
let i = 0, len = results.length;
for(; i < len; i++){
entry = childs[i];
if(!entry){
entry = document.createElement("div");
suggestions.appendChild(entry);
}
entry.innerHTML = results[i].highlight; //data[results[i]];
} }
var suggestions = document.getElementById("suggestions"); while(childs.length > len){
var autocomplete = document.getElementById("autocomplete"); suggestions.removeChild(childs[i]);
var userinput = document.getElementById("userinput"); }
userinput.addEventListener("input", show_results, true); iterate_autocomplete()
userinput.addEventListener("keyup", accept_autocomplete, true); }
suggestions.addEventListener("click", accept_suggestion, true);
function show_results(){ function iterate_autocomplete(event){
var value = this.value; suggestions.childNodes[iterate] &&
var results = index.search({ (suggestions.childNodes[iterate].style.backgroundColor = "");
query: value,
limit: 25,
suggest: true,
enrich: true,
highlight: "<b>$1</b>"
});
results = results[0] || results;
results = results.result || results;
var entry, childs = suggestions.childNodes; if(event){
var i = 0, len = results.length; const key = event.key;
if(key === "ArrowUp"){
for(; i < len; i++){ if(iterate > 0){
iterate--;
entry = childs[i];
if(!entry){
entry = document.createElement("div");
suggestions.appendChild(entry);
} }
event.preventDefault();
entry.innerHTML = results[i].highlight; //data[results[i]];
} }
else if(key === "ArrowDown"){
while(childs.length > len){ if(iterate < results.length){
suggestions.removeChild(childs[i]) iterate++;
} }
event.preventDefault();
var first_result = data[results[0]];
var match = first_result && first_result.toLowerCase().indexOf(value.toLowerCase());
if(first_result && (match !== -1)){
autocomplete.value = value + first_result.substring(match + value.length);
autocomplete.current = first_result;
}
else{
autocomplete.value = autocomplete.current = value;
} }
} }
function accept_autocomplete(event){ 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((event || window.event).keyCode === 13) { if(first_result && (match !== -1)){
autocomplete.value = value + first_result.substring(match + value.length);
this.value = autocomplete.value = autocomplete.current; autocomplete.current = first_result;
} suggestions.childNodes[iterate] &&
(suggestions.childNodes[iterate].style.backgroundColor = "rgb(0 0 255 / 10%)");
} }
else{
function accept_suggestion(event){ autocomplete.value = autocomplete.current = value;
var target = (event || window.event).target;
userinput.value = autocomplete.value = target.textContent;
while(suggestions.lastChild){
suggestions.removeChild(suggestions.lastChild);
}
return false;
} }
}()); }
function accept_autocomplete(event){
if((event || window.event).keyCode === 13) {
this.value = autocomplete.value = autocomplete.current;
suggestions.textContent = "";
}
}
function accept_suggestion(event){
let target = (event || window.event).target;
userinput.value = autocomplete.value = target.textContent;
suggestions.textContent = "";
return false;
}
</script> </script>
</body> </body>
</html> </html>