Member Avatar for palavi

hi All,
I need a drop down menu in which if a user clicks it , they can select from da list if fields are not present in da list ,it shud allow user to enter da field, and that shud be saved in da list, Is it called a combo box??? plz can anyboby give me code for dat???please!!!

  • 2 Contributors
  • 2 Replies
  • 109 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by palavi

Dani AI

Generated

— yes, what you describe is commonly called a "combo box" (a drop list that also accepts typed input). There are two practical approaches:

  • Native HTML5 datalist for a simple solution that gives suggestions while letting users type anything. See the spec and browser notes on MDN: datalist.
  • A custom combo (a select + text input or a JS widget) when you need richer behavior, validation, or better cross-browser UX.

A minimal workflow to make entries persist for all users:

  1. Keep the list in a database (yes — to share additions between users you need server-side storage).
  2. On page load fetch the saved cities from the DB and render them as options in a datalist or select. This is what @rexibit was hinting at when mentioning server-side generation.
  3. When a user types a city not in the list, submit that value to the server (AJAX is nicer UX). Server validates/sanitizes, checks for duplicates, inserts it, and returns success. Client-side JS appends the new option so it is immediately selectable.

Example UI snippet (very small):

<input list="cities" id="city" name="city">
<datalist id="cities">
  <option value="London">
  <option value="Paris">
</datalist>

For the server-side table, a simple schema:

cities(id INT PK, name VARCHAR(200) UNIQUE, created_by INT, created_at DATETIME, approved TINYINT)

Important implementation notes: always use prepared statements to avoid SQL injection; enforce a UNIQUE constraint or case-insensitive dedupe to avoid duplicates; set a reasonable length limit; consider an approval/cleanup step to avoid spam; and normalise names (trim, collapse whitespace). If you need a richer UI (tagging, keyboard navigation, creation on-the-fly), look at libraries such as Select2 (tagging mode) or jQuery UI Autocomplete for examples and patterns.

Recommended Answers

All 2 Replies

Member Avatar for rexibit

Here is a website for what you are after. It is made purely with CSS and works with most browsers.

I assume that when you mean things are added to the list once someone hovers over the section, it loads the rest of the list. You don't need a dynamic site for this as the fields are hidden anyway by a drop down list's nature.

However, if you are wanting the fields to come from a database, you can easily generate the selections of code with a "while" loop.

Member Avatar for palavi

thanks for replying , its dynamic drop down list, i saw the link provided, its good but i want drop down list, which has already predefined fields as usual for example city names, if user's city name isnt provided in the drop down list, then i want user to enter his/her city name in the drop down list and that shud be saved in the list, so dat wen da next user comes they can choose... what i want is populating values of drop down list.. for this drop down list
i shud have database???

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.