Creating a selection window in which users can enter values ​​or select from a list

Question

Is there a way to simulate an input / selection field C in which you pull out an empty text entry at the top? Users will either enter a new value or select from a list. Has anyone figured out a way to do this using PHP / Javascript? AJAX solution will be even better.

I’m not sure what to call this type of box, I don’t think it’s a “combo box” as most people think.

Answer 1

You can use the famous Chosen library :)

By the way, see the second country example.

Answer 2

You have several options.

Here is a quick function that I put together in jQuery that will do what you want. This option requires the client to have JavaScript enabled.

http://jsfiddle.net/QrA4N/25/

If you do not want JavaScript to require

If you need a solution without JavaScript (client-side code). You are stuck in setting an input field with the same "name" as the selection field next to or after it, and adding "Other" in the selection field.

<select name="selAnimals" id="selAnimals"> <option value="dog">Dog</option> <option value="cat">Cat</option> <option value="bird">Bird</option> <option value="guineapig">Guinea Pig</option> <option value="">Other</option> </select> <input type="text" name="selAnimals_Other" id="selAnimals_Other" /> 

Now your PHP will need to check both $ _POST ["selAnimals"] and $ _POST ["selAnimals_Other"] to get the correct value.

The best option is to combine the above HTML and JavaScript above to create an elegantly humiliating solution for those who have JavaScript enabled or disabled.

http://jsfiddle.net/QrA4N/26/

I added extra HTML INPUT tags to jsfiddle from the top of the answer and only changed 1 line of jQuery (makeInputSelect) function.

 var $inp = $("#" + id + "_Other");