No Description Available
0
onex
This is a multiple-input fields generator that can generate or add or create multiple input fields dynamically at a time.
Slick marquee slider - manage HTML marquee with slick javascript library.
Tesseract js demo scan text over the image by just doing small amounts of code.
var autoComplete = new autoComplete({ data: { // Data src [Array, Function, Async] | (REQUIRED) src: async () => { // API key token console.log(autoComplete) const token = "this_is_the_API_token_number"; // User search query const query = document.querySelector("#autoComplete").value; // Fetch External Data Source const source = await fetch(`https://tarekraafat.github.io/autoComplete.js/demo/db/generic.json`); // Format data into JSON const data = await source.json(); // Return Fetched data console.log(data) return data; }, key: ["food", "cities", "animals"], cache: false }, query: { // Query Interceptor | (Optional) // manipulate: (query) => { // return query.replace("pizza", "burger"); // } }, sort: (a, b) => { // Sort rendered results ascendingly | (Optional) if (a.match < b.match) return -1; if (a.match > b.match) return 1; return 0; }, placeHolder: "Food & Drinks...", // Place Holder text | (Optional) selector: "#autoComplete", // Input field selector | (Optional) observer: true, // Input field observer | (Optional) threshold: 3, // Min. Chars length to start Engine | (Optional) debounce: 300, // Post duration for engine to start | (Optional) searchEngine: "strict", // Search Engine type/mode | (Optional) resultsList: { // Rendered results list object | (Optional) container: source => { console.log(source) source.setAttribute("id", "autoComplete_list"); }, destination: "#autoComplete", position: "afterend", element: "ul" }, maxResults: 5, // Max. number of rendered results | (Optional) highlight: true, // Highlight matching results | (Optional) resultItem: { // Rendered result item | (Optional) content: (data, source) => { console.log('resultItem:=>','data:',data,'source:',source) source.innerHTML = data.match; }, element: "li" }, noResults: (dataFeedback, generateList) => { // Generate autoComplete List console.log('noResult') generateList(autoComplete, dataFeedback, dataFeedback.results); // No Results List Item const result = document.createElement("li"); result.setAttribute("class", "no_result"); result.setAttribute("tabindex", "1"); result.innerHTML = `<span style="display: flex; align-items: center; font-weight: 100; color: rgba(0,0,0,.2);">Found No Results for "${dataFeedback.query}"</span>`; document.querySelector(`#${autoComplete.resultsList.idName}`).appendChild(result); }, onSelection: feedback => { // Action script onSelection event | (Optional) console.log(feedback) console.log(feedback.selection.value.food); } });
<div class="container"> <div class="row"> <div class="col-md-6 mx-auto mt-5"> <div class="card"> <div class="card-body"> <h4>Javascript Autocomplete</h4> <div class="form-group"> <div class="autoComplete_wrapper"> <input type="text" id="autoComplete" class="" placeholder="Search Something" tabindex="1"> <ul id="autoComplete_list" aria-label="food & drinks" class="autoComplete_list" role="listbox" tabindex="-1"></ul> </div> <div class="selection"></div> </div> </div> </div> </div> </div> </div>
