जावास्क्रिप्ट में संपादन योग्य कॉम्बोबॉक्स बनाना

जावास्क्रिप्ट में एक पूरी तरह से कार्यात्मक और अनुकूलन योग्य संपादन योग्य कॉम्बोबॉक्स बनाना उपयोगकर्ता इंटरैक्शन को बढ़ाता है क्योंकि यह पूर्वनिर्धारित सूची से चयन और नए मानों का इनपुट दोनों की अनुमति देता है। यह ट्यूटोरियल दो तरीकों का पता लगाता है: HTML, CSS और जावास्क्रिप्ट का उपयोग करके एक मैनुअल कार्यान्वयन, और Select2 लाइब्रेरी का उपयोग करके एक सुव्यवस्थित दृष्टिकोण।

विषयवस्तु की तालिका

• विधि 1: एक कस्टम संपादन योग्य कॉम्बोबॉक्स बनाना
• विधि 2: Select2 लाइब्रेरी का उपयोग करना
• अपने संपादन योग्य कॉम्बोबॉक्स को बढ़ाना

विधि 1: एक कस्टम संपादन योग्य कॉम्बोबॉक्स बनाना

यह विधि बारीक नियंत्रण और अंतर्निहित यांत्रिकी की गहरी समझ प्रदान करती है। हम टाइप करने के लिए एक इनपुट फ़ील्ड और विकल्पों को प्रदर्शित करने के लिए एक छिपी हुई अनऑर्डर्ड सूची को मिलाएंगे।

सबसे पहले, आइए HTML संरचना सेट करें:


<div class="combobox">
<input type="text" id="comboboxInput" placeholder="चुनें या टाइप करें...">
<ul id="comboboxList"></ul>
</div>


अगला, स्टाइलिंग के लिए CSS जोड़ें:


.combobox {
position: relative;
display: inline-block;
}
.combobox input {
width: 200px;
padding: 5px;
border: 1px solid #ccc;
}
.combobox ul {
position: absolute;
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #ccc;
background-color: white;
display: none; /* डिफ़ॉल्ट रूप से छिपा हुआ */
}
.combobox li {
padding: 5px;
cursor: pointer;
}
.combobox li:hover {
background-color: #f0f0f0;
}


अंत में, कार्यक्षमता को संभालने के लिए जावास्क्रिप्ट:


const input = document.getElementById('comboboxInput');
const list = document.getElementById('comboboxList');
let options = ['विकल्प 1', 'विकल्प 2', 'विकल्प 3'];

input.addEventListener('input', () => {
list.innerHTML = '';
const filter = input.value.toLowerCase();
options.forEach(option => {
if (option.toLowerCase().includes(filter)) {
const item = document.createElement('li');
item.textContent = option;
item.addEventListener('click', () => {
input.value = option;
list.style.display = 'none';
});
list.appendChild(item);
}
});
list.style.display = input.value ? 'block' : 'none';
});

input.addEventListener('focus', () => {
list.style.display = 'block';
});

input.addEventListener('blur', () => {
setTimeout(() => {
list.style.display = 'none';
}, 100);
});

// नया विकल्प कार्यक्षमता जोड़ें (उदाहरण)
input.addEventListener('keydown', (event) => {
if (event.key === 'Enter' && !options.includes(input.value)) {
options.push(input.value);
list.style.display = 'none';
input.value = ''; // जोड़ने के बाद इनपुट साफ़ करें
}
});


विधि 2: Select2 लाइब्रेरी का उपयोग करना

Select2 प्रक्रिया को काफी सरल करता है। अपनी परियोजना में Select2 CSS और जावास्क्रिप्ट फ़ाइलें शामिल करें (आप उन्हें आधिकारिक Select2 वेबसाइट से डाउनलोड कर सकते हैं या CDN का उपयोग कर सकते हैं)। फिर, अपने चयन तत्व पर Select2 को इनिशियलाइज़ करें:


<select id="mySelect">
<option value="Option 1">विकल्प 1</option>
<option value="Option 2">विकल्प 2</option>
<option value="Option 3">विकल्प 3</option>
</select>

<script>
$('#mySelect').select2({
tags: true, // नए विकल्प जोड़ने को सक्षम करता है
allowClear: true // चयन को साफ़ करने की अनुमति देता है
});
</script>


tags: true विकल्प कॉम्बोबॉक्स को संपादन योग्य बनाता है, जिससे उपयोगकर्ता प्रारंभिक सूची में मौजूद नहीं विकल्प जोड़ सकते हैं। allowClear: true विकल्प चयन को साफ़ करने का एक तरीका प्रदान करता है।

अपने संपादन योग्य कॉम्बोबॉक्स को बढ़ाना

आप जिस विधि का चयन करते हैं, उसके बावजूद, इन संवर्द्धनों पर विचार करें:

• स्थिरता: सत्रों में उन्हें बनाए रखने के लिए स्थानीय संग्रहण या सर्वर-साइड डेटाबेस का उपयोग करके विकल्पों को संग्रहीत करें।
• सत्यापन: अमान्य प्रविष्टियों को रोकने के लिए इनपुट सत्यापन लागू करें।
• शैली: अपने एप्लिकेशन के डिज़ाइन के साथ सहजता से एकीकृत करने के लिए CSS का उपयोग करके उपस्थिति को अनुकूलित करें।
• रिमोट डेटा स्रोत: बड़े डेटासेट के लिए, AJAX कॉल का उपयोग करके गतिशील रूप से विकल्प प्राप्त करें।