選択フィールドの上のテキスト入力

Question

画像のような効果を得るにはどうすればいいですか？ 入力フィールドをリストの上に置くことを意味します。 jQueryのプラグインがありますか？このような効果を達成するために、 Select-2 jquery - ：

Answer 1

は、このリンクを利用することができます。

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

Answer 2

あなたはこのjQueryプラグインからソリューションを取得します：https://github.com/HemantNegi/jquery.sumoselect

Answer 3

あなたはjQueryのを使用して、独自のプラグインを作ることができます。

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())); 
}); 
});