CODEWITHSUNDEEP
javascriptjquerycssselectinput
Delgan
Delgan

Reputation: 19677

How to combine both <select> and <input> by an aesthetic way?

I work on a userscript (Greasemonkey/TamperMonkey), and I need to add a <input> in my drop-down list if ever an element is selected.

It is a way to make my <select> dynamic and interactive so that the user can add items by itself.

I would like visually, the user has the impresion that the <input> is an <option> in the <select>.

The only way I've found to do this is to reduce the width of <select> and display an <input>.



HTML:

<input style='display:none'></input>
<select id='my_select' style='width:150px'>
    <option>Test 1</option>
    <option>Test 2</option>
    <option>Test 3</option>
    <option>Make me feel input</option>
</select>


Script:

$('#my_select').change(function() {
    var choosen = $("select option:selected").text();

    if (choosen == 'Make me feel input') {
        $('input').attr('style','width:125px;border-right:0px');
        $('select').attr('style','width:24px;margin-left:-4px;border-left:0px')
    }
    else {
        $('input').attr('style','display:none');
        $('select').attr('style','width:150px');
    }
});


The result is pretty nice, you can try it on jsFiddle.

Unfortunately, because of border-left:0px and border-right:0px appearance is completely lost, and the style of the input and select become ugly.

Yuck! (Firefox)

Moreover, the final appearance depends on the browser used. With Chrome, for example, here's what happens: Yuck²!

So I wish I configure my input-select in order to make it look good regardless of the browser. Is it possible to simulate the appearance given by Firefox using CSS and JavaScript?

Of course, I thought about using a plugin like Chosen, SelectBoxIt ou Select2, but I do not think they are easily compatible with my input-select (because of the width resize for example).

Could you help me please?

Upvotes: 3

Views: 6857

Answers (4)

utarid
utarid

Reputation: 1715

you should try this : https://github.com/eredacokmerke/metal

also there is an example : codepen.io/eredacokmerke/pen/LEpNLg

from metal readme: 

Metal is a pure javascript library that provides combination of select and input tag.

Usage

add css :
<link rel="stylesheet" href="https://raw.githack.com/eredacokmerke/metal/master/metal.css">

add js :
<script src="https://raw.githack.com/eredacokmerke/metal/master/metal.js"></script>

add html for list with input:
<div class="metal-div">
    <div class="metal-input-div" metal-text="Choose..."></div>
    <div class="metal-items-div">
        <ul class="metal-items">
            <li>first_item</li>
            <li>second_item</li>
            ....
        </ul>
    </div>
</div>

add html for list without input:
<div class="metal-div">
    <div class="metal-output-div" metal-text="Choose..."></div>
    <div class="metal-items-div">
        <ul class="metal-items">
            <li>first_item</li>
            <li>second_item</li>
            ....
        </ul>
    </div>
</div>

Upvotes: 0

goat
goat

Reputation: 31824

A ui component that's frequently called a "combo box" has functionality similar to what you describe.

examples:

jquery
http://simpletutorials.com/?path=tutorials/javascript/jquery/ddcombobox
http://fairwaytech.com/flexbox/flexbox-demos/#demo1

dojo
https://dojotoolkit.org/reference-guide/1.9/dijit/form/ComboBox.html#dijit-form-combobox

cross-browser form element styling has always been a challenge. generally, ui toolkits just avoid the issue and totally recreate the ui components using lots of divs and explicit styles for reliability.

Upvotes: 0

Ilia G
Ilia G

Reputation: 10221

There is an easier way without wrappers. You can set your input to position:relative and display:inline-block and then manipulate margin to position over the select. Note that it is much easier to add input after select, which will make z-index hackery unnecessary.

See example here: http://jsfiddle.net/AnbmU/6/ I also took liberty to clean up your code from common mistakes.

EDIT: Actually, you don't even need position:relative. Not sure why I brought this up.

Upvotes: 5

Homam
Homam

Reputation: 706

i visied the fiddle yuo provide in some browsers.
there is some problems and paradoxes:

1- when you click on select box, it opens (naturally) and when you click on an input it activates and is ready to type in. question is how you want to handle this?

2- in your code when you reduce the select width it will open in a shifted place wich is equall to your input width;

finally answer
you sholud put your input and select in a container(wrapper), and make it position: relative;
then comes yuor input with: border: 0; position: absolute; top: 0; left: 0; z-index: 2; and display: none, when you want to activate it simply make it: display: block; and it handles both above problems nicely

Upvotes: 0

Related Questions