选择字段上方的文本输入

Question

如何获得图片中的效果。 我的意思是将输入字段放在列表上方。 也许有jQuery的插件？

Answer 1

您可以使用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()));
});
});

Answer 2

您可以使用此链接： - Select-2 jquery，以达到这样的效果。

.class1 {
    font-weight: bold;    
}

.class2 {
    font-weight: normal;    
}

.class3 {
    font-weight: bold;    
}

Answer 3

您将从此jquery插件获得解决方案：https://github.com/HemantNegi/jquery.sumoselect