Simple quick javascript dropdown plugin with search, that able to work with thousands of options

Overview

fstdropdown

fstdropdown - simple quick javascript dropdown plugin with bootstrap design and search, that able to work with thousands of options. Now with multiselect too. It has no dependencies, pure js and css.

USAGE

fstdropdown initializes on page load, just add class "fstdropdown-select" to your select. If you add your select dynamically, add "fstdropdown-select" class to it and call function setFstDropdown(). If you change your select options list, use document.querySelector("your select").fstdropdown.rebind() to update dropdown list. You can use multiselect, by adding attribute multiple="multiple" to select. If you dont need search in dropdown, just add data-searchdisable="true" to the select. To add placeholder to search input, add data-placeholder to select. To use opened select or multiselect, add data-opened="true" to select.

To select value, you can use document.querySelector("your select").fstdropdown.setValue("your value"). If you want to select multiple values, you can send array of values document.querySelector("your select").fstdropdown.setValue(["value1", "value2", "value3"]).

Demo - https://htmlpreview.github.io/?https://github.com/VirtusX/fstdropdown/blob/master/index.html

You might also like...

This is a simple booklist app. The user is able to add and remove books to their list.

This is a simple booklist app. The user is able to add and remove books to their list.

Awesome project In this project, I made a simple website called Awesome Books. The user is able to add and remove books, the added books are arranged

Sep 1, 2022

A personal semantic search engine capable of surfacing relevant bookmarks, journal entries, notes, blogs, contacts, and more, built on an efficient document embedding algorithm and Monocle's personal search index.

A personal semantic search engine capable of surfacing relevant bookmarks, journal entries, notes, blogs, contacts, and more, built on an efficient document embedding algorithm and Monocle's personal search index.

Revery 🦅 Revery is a semantic search engine that operates on my Monocle search index. While Revery lets me search through the same database of tens o

Dec 30, 2022

Tesodev-search-app - Personal Search App with React-Hooks

Tesodev-search-app - Personal Search App with React-Hooks

Tesodev-search-app Personal Search App with React-Hooks View on Heroku : [https://tesodev-staff-search-app.herokuapp.com/] Instructions Clone this rep

Nov 10, 2022

Instant spotlight like search and actions in your browser with Sugu Search.

Instant spotlight like search and actions in your browser with Sugu Search.

Sugu Search Instant spotlight like search and actions in your browser with Sugu Search. Developed by Drew Hutton Grab it today for Firefox and Chrome

Oct 12, 2022

An efficient (and the fastest!) way to search the web privately using Brave Search Engine

Brave Search An efficient (and the fastest) way to search the web privately using Brave Search Engine. Not affiliated with Brave Search. Tested on Chr

Jun 2, 2022

Node starter kit for semantic-search. Uses Mighty Inference Server with Qdrant vector search.

Node starter kit for semantic-search.  Uses Mighty Inference Server with Qdrant vector search.

Mighty Starter This project provides a complete and working semantic search application, using Mighty Inference Server, Qdrant Vector Search, and an e

Oct 18, 2022

Allows users to quickly search highlighted items on Wikipedia. Inspired by the "search Wikipedia" function on the kindle mobile app.

Allows users to quickly search highlighted items on Wikipedia. Inspired by the

wikipedia-search Allows users to quickly search highlighted items on Wikipedia. Inspired by the "search Wikipedia" function on the kindle mobile app.

Aug 15, 2022

🟢 Music player app with a modern homepage, fully-fledged music player, search, lyrics, song exploration features, search, popular music around you, worldwide top charts, and much more.

🟢 Music player app with a modern homepage, fully-fledged music player, search, lyrics, song exploration features, search, popular music around you, worldwide top charts, and much more.

Music-player-app see the project here. 1. Key Features 2. Technologies I've used Key Features: 🟢 Fully responsive clean UI. 🟢 Entirely mobile respo

Nov 16, 2022

Math Calc is a simple algebra calculator with options for basic addition, subtraction, multiplication, and division as well as many more mathematical properties.

Math Calc is a simple algebra calculator with options for basic addition, subtraction, multiplication, and division as well as many more mathematical properties.

Math-Calc Math Calc is a simple algebra calculator with options for basic addition, subtraction, multiplication, and division as well as many more mat

Dec 25, 2021
Comments
  • Why is the text of the option element assigned in function rebindDropdown()?

    Why is the text of the option element assigned in function rebindDropdown()?

    listEl.textContent = optList[opt].text;

    Why is the text rather than the textContent of the original element taken here? The text attribute ignores some characters like double whitespace, which leads to the fstdropdown not containing the same text as the original select.

    opened by lukas-wegmeth 1
  • Cannot use keyboard arrows to move between options [UI issue]

    Cannot use keyboard arrows to move between options [UI issue]

    Hi,

    I'm looking for an alternative to the jquery chosen. Within fstdropdown I miss ability to move between option with keyboard arrows. Can you add this feature?

    opened by jasomdotnet 0
  • When multiselect is enabled, unselecting an option causes that option to appear in the

    When multiselect is enabled, unselecting an option causes that option to appear in the "Selected" input

    This bug is reproducible in the demo: https://htmlpreview.github.io/?https://github.com/VirtusX/fstdropdown/blob/master/index.html

    Steps to reproduce:

    1. Under the You can use multiselect, by adding attribute multiple="multiple" to select section, select "First" and "Second"
    2. Notice the Selected input changes to "2 options selected"
    3. Then unselect "First"
    4. Notice that the Selected input changes to "First". This is incorrect, because "First" was unselected. It should show "Second" instead because that's the option that is still selected.
    opened by danielleng 0
Owner
Vladyslav Andrieiev
Vladyslav Andrieiev
A string of four operations of the library, can solve the js digital calculation accuracy of scientific notation and formatting problems, support for thousands of decimal point formatting output operations

A string of four operations of the library, can solve the js digital calculation accuracy of scientific notation and formatting problems, support for thousands of decimal point formatting output operations

null 10 Apr 6, 2022
AWS Lambda & Serverless - Developer Guide with Hands-on Labs. Develop thousands line of aws lambda functions interact to aws serverless services with real-world hands-on labs

AWS Lambda & Serverless - Developer Guide with Hands-on Labs UDEMY COURSE WITH DISCOUNTED - Step by Step Development of this Repository -> https://www

awsrun 35 Dec 17, 2022
"Jira Search Helper" is a project to search more detail view and support highlight than original jira search

Jira Search Helper What is Jira Search Helper? "Jira Search Helper" is a project to search more detail view and support highlight than original jira s

null 41 Dec 23, 2022
🍭 search-buddy ultra lightweight javascript plugin that can help you create instant search and/or facilitate navigation between pages.

?? search-buddy search-buddy is an open‑source ultra lightweight javascript plugin (* <1kb). It can help you create instant search and/or facilitate n

Michael 4 Jun 16, 2022
A JavaScript Library To Make Your Work Work Easier/Faster

Functionalty.js (beta) About ✍️ This Is A JavaScript Library To Make Your Work Easier/Faster, You Can See Functionalty.js Website From Here Project Cr

Ali-Eldeba 16 Aug 30, 2022
A JavaScript Library To Make Your Work Work Easier/Faster

Functionality.js (beta) About ✍️ This Is A JavaScript Library To Make Your Work Easier/Faster, You Can See Functionalty.js Website From Here Project C

Ali-Eldeba 9 May 25, 2022
A JavaScript Library To Make Your Work Work Easier/Faster

Functionality.js About ✍️ This Is A JavaScript Library To Make Your Work Easier/Faster, You Can See Functionalty.js Website From Here Project Created

functionality 16 Jun 23, 2022
A plugin for Obsidian (https://obsidian.md) that adds a button to its search view for copying the Obsidian search URL.

Copy Search URL This plugin adds a button to Obsidian's search view. Clicking it will copy the Obsidian URL for the current search to the clipboard. T

Carlo Zottmann 6 Dec 26, 2022
Kuldeep 2 Jun 21, 2022