Texteingabe über Auswahlfeld

Question

Wie bekomme ich einen solchen Effekt wie auf dem Bild. Ich meine das Platzieren des Eingabefeldes über der Liste. Vielleicht gibt es ein Plugin für jQuery?

Answer 1

können Sie über diesen Link: - Select-2 jquery, eine solche Wirkung zu erzielen.

https://select2.github.io/examples.html 

Answer 2

Sie werden Lösung aus diesem jQuery-Plugin erhalten: https://github.com/HemantNegi/jquery.sumoselect

Answer 3

Sie können Ihr eigenes Plugin mit JQuery machen.

HTML:

<ul class="nav" role="navigation"> 
<li class="dropdown"> <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Select<b class="caret"></b></a> 

<ul class="dropdown-menu" role="menu" aria-labelledby="drop2"> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#"><input type="text" id="other"/></a></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a> </li> 
    <li role="presentation" class="divider"></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a> </li> 
    <li role="presentation" class="divider"></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a></li> 
    <li role="presentation" class="divider"></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">4 </a> </li> 
    <li role="presentation" class="divider"></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">5 </a> </li> 
</ul> 
</li> 
</ul> 

CSS ::

.nav { 
margin-left: 0; 
margin-bottom: 20px; 
list-style: none; 
} 

ul, ol { 
padding: 0; 
margin: 0 0 10px 25px; 
} 

.dropup, .dropdown { 
position: relative; 
} 

.open>.dropdown-menu { 
display: block; 
} 

.nav>li>a { 
display: block; 
} 

.dropdown-menu { 
position: absolute; 
top: 100%; 
left: 0; 
z-index: 1000; 
display: none; 
float: left; 
min-width: 160px; 
padding: 5px 0; 
margin: 2px 0 0; 
list-style: none; 
background-color: #ffffff; 
border: 1px solid #ccc; 
border: 1px solid rgba(0, 0, 0, 0.2); 
-webkit-border-radius: 6px; 
-moz-border-radius: 6px; 
    border-radius: 6px; 
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
-webkit-background-clip: padding-box; 
-moz-background-clip: padding; 
    background-clip: padding-box; 
    } 

.dropdown-menu .divider { 
    height: 1px; 
    margin: 9px 1px; 
    overflow: hidden; 
    background-color: #e5e5e5; 
    border-bottom: 1px solid #ffffff; 
    } 

.dropdown-menu>li>a { 
    display: block; 
    padding: 3px 20px; 
    clear: both; 
    font-weight: normal; 
    line-height: 20px; 
    color: #333333; 
    white-space: nowrap; 
    } 

JQuery ::

$(document).ready(function(){ 
$('.dropdown-menu input').click(function (e) { 
e.stopPropagation(); 
}); 

$('.dropdown a').click(function(){ 
    $('.dropdown').addClass("open"); 
}); 
$('.dropdown-menu li').click(function(){ 

$('.dropdown-toggle b').remove().appendTo($('.dropdown- toggle').text($(this).text())); 
}); 
});