A lightweight, customizable HTML web component for creating drop-down lists that are searchable by keywords of your choice.
Pure vanilla JavaScript implementation with no external dependencies
Minimal footprint with only essential features
Works seamlessly across all device sizes and works in all browsers
Get up and running with pick-list in minutes. Here's a complete working example:
<!DOCTYPE html>
<html>
<head>
<title>Pick-list Quick Start</title>
<script src="https://cdn.jsdelivr.net/gh/GiladMeirson/picklist.js@main/pickList.min.js"></script>
</head>
<body>
<h3>Select a fruit by keywords:</h3>
<pick-list id="FruitPickList" placeholder="Choose a fruit..."></pick-list>
<script>
const picker = document.getElementById('FruitPickList');
picker.setItems([
{ value: 'ð', keywords: ['apple', 'red', 'fruit', 'sweet'] },
{ value: 'ð', keywords: ['apple', 'green', 'fruit', 'sour'] },
{ value: 'ð', keywords: ['banana', 'yellow', 'fruit', 'tropical'] },
{ value: 'ðĨ', keywords: ['mango', 'orange', 'fruit', 'tropical'] },
{ value: 'ð', keywords: ['watermelon', 'red', 'fruit', 'summer'] },
{ value: 'ð', keywords: ['grapes', 'purple', 'fruit', 'wine'] }
]);
picker.addEventListener('picklist-select', (e) => {
alert(`Selected: ${e.detail.value}`);
});
</script>
</body>
</html>Try searching for keywords like "watermelon", "red", "tropical", etc.
Selected Value: none
Install pick-list via NPM or include it directly in your HTML. Follow the guide below to get started:
npm install picklist.jsAfter installing, import or require the library in your project:
// Using ES6 import
import picklist from 'picklist.js';
// or using CommonJS require
const Picklist = require('picklist.js');Alternatively, use a CDN to include the library in your HTML:
<script src="https://cdn.jsdelivr.net/gh/GiladMeirson/picklist.js@main/pickList.min.js"></script>If you are using plain HTML and vanilla JS, use this link in the head or at the end of the body.
Using the pick-list component is straightforward:
<script src="https://cdn.jsdelivr.net/gh/GiladMeirson/picklist.js@main/pickList.min.js"></script><pick-list placeholder="Select a fruit..."></pick-list>
or you can also use it like this:
<pick-list placeholder="Select a fruit..." />const picklist = document.querySelector('pick-list');
picklist.setItems([
{ value: 'Apple', keywords: ['fruit', 'red', 'sweet'] },
{ value: 'Banana', keywords: ['fruit', 'yellow', 'tropical'] },
{ value: 'Orange', keywords: ['fruit', 'citrus', 'vitamin c'] }
]);The pick-list component provides a comprehensive API for managing picklist functionality. Here are all available properties, methods and events:
myPickList.setItems([
{ value: 'Apple', keywords: ['fruit', 'red', 'sweet'] },
{ value: 'Banana', keywords: ['yellow', 'tropical'] }
]);myPickList.openDropdown();myPickList.closeDropdown();myPickList.selectItem('Apple');myPickList.addEventListener('picklist-select', (e) => {
console.log('Selected value:', e.detail.value);
console.log('Item keywords:', e.detail.keywords);
});myPickList.addEventListener('picklist-input', (e) => {
console.log('Current input:', e.detail.value);
});Items can be passed in two formats:
// Option 1: Object with value and keywords
const items = [
{ value: 'Apple', keywords: ['fruit', 'red', 'sweet'] }
];
// Option 2: Simple string (keyword will be the lowercase value)
const items = ['Apple', 'Banana', 'Orange'];The picklist library emits custom events to help you hook into user interactions. You can listen for these events on the picklist element:
picklist-select: Fired when an option is selected. The event detail typically contains the selected value or item.picklist-input: Fired when the search input value changes (each time the user types). The event detail may contain the current input string.Below is an example of attaching event listeners to capture these events:
<script>
const picklistElement = document.getElementById('myPicklist');
// Listen for selection events
picklistElement.addEventListener('picklist-select', function(event) {
console.log('Selected item:', event.detail.value);
// You can also update your UI or perform actions based on the selection
});
// Listen for input (search) events
picklistElement.addEventListener('picklist-input', function(event) {
console.log('Current search text:', event.detail.search);
// This event can be used to implement dynamic suggestions or other interactions
});
</script>By leveraging these events, you can integrate custom logic whenever a user selects an item or types in the picklist's search field. This makes the component highly extensible and adaptable to various use cases.
Try out the picklist component with keyword search functionality:
Selected: none
Search Keywords: none
const fruits = [
{ value: "Apple", keywords: ["fruit", "red", "sweet", "crisp"] },
{ value: "Banana", keywords: ["fruit", "yellow", "tropical", "potassium"] },
{ value: "Orange", keywords: ["fruit", "citrus", "vitamin c", "juice"] },
{ value: "Grape", keywords: ["fruit", "purple", "wine", "antioxidants"] },
{ value: "Mango", keywords: ["fruit", "tropical", "sweet", "yellow"] },
{ value: "Pineapple", keywords: ["fruit", "tropical", "sweet", "tart"] },
{ value: "Strawberry", keywords: ["fruit", "red", "sweet", "berries"] },
{ value: "Blueberry", keywords: ["fruit", "blue", "antioxidants", "berries"] }
];
// ... more fruits
];You can obtain picklist from the following sources:
npm install picklist.js in your project.Once downloaded or installed, you can include the library in your project and follow the Usage guide to integrate it.