mirror_js/flexsearch
1
0
Fork 0
mirror of https://github.com/nextapps-de/flexsearch.git synced 2025-09-02 18:33:17 +02:00
Code Issues Releases Wiki Activity

improve auto-complete demo

Browse Source
This commit is contained in:
Thomas Wilkerling
2025-05-14 11:23:03 +02:00
parent 6d46dce491
commit 430e0c072c
2 changed files with 29 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
demo/autocomplete.html
View File

@@ -90,10 +90,10 @@
<body> <body>
<div id="header"> <div id="header">
<form style="position: relative; width: 100%;"> <form style="position: relative; width: 100%;">
<input type="text" id="trigger-prev"> <input type="text" id="trigger-prev" tabindex="1">
<input type="text" id="autocomplete" disabled> <input type="text" id="autocomplete" readonly>
<input type="text" id="userinput" placeholder="Search by movie title ..." autocorrect="off" spellcheck="false" autocomplete="off" autofocus> <input type="text" id="userinput" tabindex="2" placeholder="Search by movie title ..." autocorrect="off" spellcheck="false" autocomplete="off" autofocus>
<input type="text" id="trigger-next"> <input type="text" id="trigger-next" tabindex="3">
</form> </form>
<label> <label>
<input type="checkbox" id="suggest" checked> Suggest <input type="checkbox" id="suggest" checked> Suggest
@@ -103,6 +103,17 @@
<!--<div id="info">iterate results by arrow keys</div>--> <!--<div id="info">iterate results by arrow keys</div>-->
<script type="module"> <script type="module">
// Features:
// 1. Instant Search
// 2. Auto-Complete
// 3. Suggestions
// 4. Query Cache
// 5. Result Highlighting
// 6. Tokenizer
// 7. Encoder
// 8. Document Index (Field-Search)
// 9. Keyboard Navigation
import { Document } from "https://cdn.jsdelivr.net/gh/nextapps-de/flexsearch@master/dist/flexsearch.compact.module.min.js"; import { Document } from "https://cdn.jsdelivr.net/gh/nextapps-de/flexsearch@master/dist/flexsearch.compact.module.min.js";
import data from "https://cdn.jsdelivr.net/gh/nextapps-de/flexsearch@master/demo/data/movies.js"; import data from "https://cdn.jsdelivr.net/gh/nextapps-de/flexsearch@master/demo/data/movies.js";
@@ -113,20 +124,23 @@
// for an instant search on keypress // for an instant search on keypress
cache: true, cache: true,
document: { document: {
// it requires storing the documents // storing documents is required in this example
store: true, store: true,
index: [{ index: [{
field: "title", field: "title",
// a forward tokenizer is minimum // important: a forward tokenizer is minimum
// required by an instant search // required by an instant search
tokenize: "forward" tokenize: "forward"
}] }]
} }
}); });
// The movies.js data used in this example is an array of strings.
// Since result highlighting needs a Document Index, the data
// has to be simply upgraded to a pseudo document.
for(let i = 0; i < data.length; i++){ for(let i = 0; i < data.length; i++){
// pass a flat pseudo document when using // pass a json-like object
// result highlighting on plain string inputs
index.add(i, { index.add(i, {
"title": data[i] "title": data[i]
}); });
@@ -148,12 +162,12 @@
suggestions.addEventListener("click", accept_suggestion, true); suggestions.addEventListener("click", accept_suggestion, true);
trigger_prev.addEventListener("focus", function(){ trigger_prev.addEventListener("focus", function(){
iterate_selected({ key: "ArrowUp"}); iterate_selected({ key: "ArrowUp" });
userinput.focus(); userinput.focus();
}, true); }, true);
trigger_next.addEventListener("focus", function(){ trigger_next.addEventListener("focus", function(){
iterate_selected({ key: "ArrowDown"}); iterate_selected({ key: "ArrowDown" });
userinput.focus(); userinput.focus();
}, true); }, true);
@@ -247,8 +261,11 @@
function accept_autocomplete(event){ function accept_autocomplete(event){
const key = (event || window.event).keyCode; const key = (event || window.event).keyCode;
if(key === 13 || key === 39) { if(key === 13 || key === 39) {
userinput.value = autocomplete.value = autocomplete.current; const node = suggestions.childNodes[iterate];
if(!node) return;
userinput.value = autocomplete.value = node.textContent;
suggestions.textContent = ""; suggestions.textContent = "";
} }
} }

2
test/package.json
View File

@@ -4,7 +4,7 @@
"scripts": { "scripts": {
"test": "mocha ./*.js --exit", "test": "mocha ./*.js --exit",
"test:ts": "npx tsc --noEmit --lib esnext ./types.ts", "test:ts": "npx tsc --noEmit --lib esnext ./types.ts",
"test:github": "npm run test:ts && mocha async.js --exit flexsearch.compact.min", "test:github": "npm run test:ts && mocha ./*.js --exit flexsearch.compact.min",
"test:coverage": "c8 -c ./.c8rc.json mocha ./*.js --exit", "test:coverage": "c8 -c ./.c8rc.json mocha ./*.js --exit",
"test:keystore": "set NODE_OPTIONS=--max-old-space-size=16000 && c8 -c ./.c8rc.json mocha ./keystore.js --exit", "test:keystore": "set NODE_OPTIONS=--max-old-space-size=16000 && c8 -c ./.c8rc.json mocha ./keystore.js --exit",
"test:db": "c8 -c ./.c8rc.json mocha ./persistent.*.js --exit", "test:db": "c8 -c ./.c8rc.json mocha ./persistent.*.js --exit",