Comments (5)
Hey I encountered the same problem. I think according to the documentation you could implement a custom search engine. For me setting the search engine to "loose" solved my problem.
EDIT:
It turns out building a custom search engine is easier than I thought.
function searchEngine(query, record) { return record;}
This directly returns all the results you receive from your REST API call. The only this is, that the parts of the result matching the query string are not highlighted anymore.
from autocomplete.js.
Thank you @LuViKu
from autocomplete.js.
@LuViKu can you please give an example of the whole config or setup?
from autocomplete.js.
@squareclouds sure here is my implementation:
`// custom search engine
function searchEngine(query, record) {
return record;
}
const autoCompleteJS = new autoComplete({
selector: "#autoComplete",
placeHolder: "Search for your stuff",
searchEngine: searchEngine, // Strict, loose or custom search engine
data: {
src: async (query) => {
try {
// Fetch Data from external Source
const source = await fetch(`your api endpoint`);
const data = await source.json();
return data;
} catch (error) {
return error;
}
},
// Gets the value for the specified key from your api's response
keys: ["my-api-value"]
},
resultItem: {
highlight: true, //Does not work with custom search engine. You'll need to implement this yourself if necessary
element: (item, data) => {
// Here you can modify the div containing your data (item) and your data (data).
}
},
},
events: {
input: {
selection: (event) => {
// I use this for accessing the data of the result selected by the user.
}
}
}
});`
Please let me know if anything is unclear.
from autocomplete.js.
@LuViKu perfect! this worked like a charm :) you had one mistake though, after resultItem you close the whole object, you have one bracket too much
resultItem: {
highlight: true, //Does not work with custom search engine. You'll need to implement this yourself if necessary
element: (item, data) => {
// Here you can modify the div containing your data (item) and your data (data).
}
},
}, // <<<-------- must be removed
from autocomplete.js.
Related Issues (20)
- Implement Autocomplete for dynamically created DOM elements. HOT 1
- Force download on click on autocomplete suggestion HOT 3
- Pressing Esc clears the input, user loses data when *editing* as opposed to initial input
- Replace only a portion of the input HOT 1
- HTML input is not escaped HOT 2
- getting "e.feedback.results is undefined" when calling select()
- input field not empty & length == threshold hides results ????
- Adding an onClear event
- Case sensitive search
- Search Result as JSON List with label and value
- Page through sets of results when matches.length > maxResults HOT 1
- how to trigger a selection event with right mouse
- Allow selection of resultItems by class instead of tag
- Force the user to choose from results
- Highlight - click on 'Mark' markup
- Chrome Uncaught TypeError: Cannot read properties of undefined (reading '1')
- cannot fetch on key input
- Updated documentation on `selection` event HOT 1
- Is this abandoned? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from autocomplete.js.