Member Avatar for Prashanth K M

I am having a list of items in combo box. in runtime if user feels to add new item to combo list he should be allowed to do the same just by typing new item in combo box typing area

  • 4 Contributors
  • 4 Replies
  • 207 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Santanu.Das

Dani AI

Generated

A few thread replies (notably , and ) point toward adding typed entries via a separate control or an event handler. For web pages, the HTML <select> is not editable, so the simplest native option is an <input> with a <datalist> (suggestions plus free text). A lightweight pattern is below: add the typed value on Enter or on blur, dedupe case-insensitively, append a new <option> safely (use element properties, not innerHTML), and persist choices in localStorage so they survive a reload.

<label for="combo">Choose or add:</label>
<input id="combo" list="comboList" />
<datalist id="comboList"></datalist>

<script>
(function(){
  const input = document.getElementById('combo');
  const datalist = document.getElementById('comboList');
  const KEY = 'combo-items-v1';

  function load(){ try { return JSON.parse(localStorage.getItem(KEY))||[]; } catch{ return []; } }
  function save(a){ localStorage.setItem(KEY, JSON.stringify(a)); }
  function add(v){
    if(!v) return; v = v.trim(); if(!v) return;
    const items = load();
    if(items.some(i => i.toLowerCase() === v.toLowerCase())) return;
    items.push(v); save(items);
    const o = document.createElement('option'); o.value = v; datalist.appendChild(o);
  }

  load().forEach(v => { const o = document.createElement('option'); o.value = v; datalist.appendChild(o); });
  input.addEventListener('keydown', e => { if(e.key === 'Enter'){ add(input.value); input.value = ''; }});
  input.addEventListener('blur', () => add(input.value));
})();
</script>

Notes and tips: always trim and check for duplicates (case-insensitive). Avoid inserting raw HTML—use element.value/textContent to prevent XSS. Datalist is fine in modern browsers; for older ones or if more control is needed, implement a custom dropdown (input + programmatic list) or fall back to an explicit Add button and event handler. For accessibility, pair the input with a label and when building a custom control follow ARIA combobox patterns.

Recommended Answers

All 4 Replies

Member Avatar for Reverend Jim

That's not how a combo box works. You could provide a textbox and an ADD button to do that though.

Member Avatar for Prashanth K M

no other go!!!!

i was trying if i miss something...... thanks :)

Member Avatar for tinstaafl

Actually you can do that all you need is a button(to signify when the typing is done) and a handler for its click event:

Private Sub Button4_Click(sender As Object, e As EventArgs) Handles Button4.Click
    If ComboBox1.Text <> "" AndAlso Not ComboBox1.Items.Contains(ComboBox1.Text) Then
        ComboBox1.Items.Add(ComboBox1.Text)
        ComboBox1.ResetText()
    End If
End Sub
Edited by tinstaafl
commented: Perfect to do that +7
Member Avatar for Santanu.Das

Or you can do it with ComboBox1's LostFocus Event

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.