查询下拉框

最近项目中要实现查询下拉框，让这个下拉框可选、可输入

效果图：

输入时候：

点击下拉按钮时候：

实现步骤

1.查询下拉框是由2部分组成，其一是一个input框，其二是下拉框，让下拉框（width比input大）在input后面，这样就就可以显示一个查询下拉框了。

jsp代码：

（1）我们的input框

 <label class="col-sm-1 control-label">账号</label>
                           <div class="col-sm-2">
                               <input id="username" name="username" type="text" class="form-control">
                           </div>

（2）js对样式进行修改，并在后面追加一个select查询框（这个js一定要在jsp页面上，因为用到了c标签）

<script type="text/javascript">
    $(function() {
           $("input[name='username']").attr("style","width:90px;position:absolute");
                        $("input[name='username']").attr('onblur','').click(eval(function({searchProjectName()}));                                                                                                                                                                                                                                                        
        $("input[name='username']").after("<select name=\"projectNameSelect\" id=\"projectNameSelect\" οnchange=\"onChange(this)\" style=\"width:107px;height:34px;CLIP: rect(auto auto auto 90px); POSITION:absolute\"><option selected=\"true\" disabled=\"true\" value=\"0\">请选择</option><c:forEach items='${userList}' var='list'><option value='${list.username}'>${list.username}</option></c:forEach></select>");     
    });

    </script>

（3）jsp引入c标签、支持el表达式

<%@ page isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>   

（4）解决TypeError：$.browser is undefined

 jquery从1.9 版开始，移除了 $.browser 和 $.browser.version

引入

<script src="js/browser.js"></script>

代码：

(function(jQuery){   
 
if(jQuery.browser) return;   
 
jQuery.browser = {};   
jQuery.browser.mozilla = false;   
jQuery.browser.webkit = false;   
jQuery.browser.opera = false;   
jQuery.browser.msie = false;   
 
var nAgt = navigator.userAgent;   
jQuery.browser.name = navigator.appName;   
jQuery.browser.fullVersion = ''+parseFloat(navigator.appVersion);   
jQuery.browser.majorVersion = parseInt(navigator.appVersion,10);   
var nameOffset,verOffset,ix;   
 
// In Opera, the true version is after "Opera" or after "Version"   
if ((verOffset=nAgt.indexOf("Opera"))!=-1) {   
jQuery.browser.opera = true;   
jQuery.browser.name = "Opera";   
jQuery.browser.fullVersion = nAgt.substring(verOffset+6);   
if ((verOffset=nAgt.indexOf("Version"))!=-1)   
jQuery.browser.fullVersion = nAgt.substring(verOffset+8);   
}   
// In MSIE, the true version is after "MSIE" in userAgent   
else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {   
jQuery.browser.msie = true;   
jQuery.browser.name = "Microsoft Internet Explorer";   
jQuery.browser.fullVersion = nAgt.substring(verOffset+5);   
}   
// In Chrome, the true version is after "Chrome"   
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {   
jQuery.browser.webkit = true;   
jQuery.browser.name = "Chrome";   
jQuery.browser.fullVersion = nAgt.substring(verOffset+7);   
}   
// In Safari, the true version is after "Safari" or after "Version"   
else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {   
jQuery.browser.webkit = true;   
jQuery.browser.name = "Safari";   
jQuery.browser.fullVersion = nAgt.substring(verOffset+7);   
if ((verOffset=nAgt.indexOf("Version"))!=-1)   
jQuery.browser.fullVersion = nAgt.substring(verOffset+8);   
}   
// In Firefox, the true version is after "Firefox"   
else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {   
jQuery.browser.mozilla = true;   
jQuery.browser.name = "Firefox";   
jQuery.browser.fullVersion = nAgt.substring(verOffset+8);   
}   
// In most other browsers, "name/version" is at the end of userAgent   
else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) <   
(verOffset=nAgt.lastIndexOf('/')) )   
{   
jQuery.browser.name = nAgt.substring(nameOffset,verOffset);   
jQuery.browser.fullVersion = nAgt.substring(verOffset+1);   
if (jQuery.browser.name.toLowerCase()==jQuery.browser.name.toUpperCase()) {   
jQuery.browser.name = navigator.appName;   
}   
}   
// trim the fullVersion string at semicolon/space if present   
if ((ix=jQuery.browser.fullVersion.indexOf(";"))!=-1)   
jQuery.browser.fullVersion=jQuery.browser.fullVersion.substring(0,ix);   
if ((ix=jQuery.browser.fullVersion.indexOf(" "))!=-1)   
jQuery.browser.fullVersion=jQuery.browser.fullVersion.substring(0,ix);   
 
jQuery.browser.majorVersion = parseInt(''+jQuery.browser.fullVersion,10);   
if (isNaN(jQuery.browser.majorVersion)) {   
jQuery.browser.fullVersion = ''+parseFloat(navigator.appVersion);   
jQuery.browser.majorVersion = parseInt(navigator.appVersion,10);   
}   
jQuery.browser.version = jQuery.browser.majorVersion;   
})(jQuery); 
（5）编写第二部中的onchange方法、searchProjectName()方法

//在查询下拉框输入光标离开时触发，

function searchProjectName(){

//拿到输入框中的值

    var projectNameValue = $("input[name='username']").val();

//新建数组，把下拉框中的options中的text值放到数组中。

     var name = new Array();
     var j = 0;
     var projectNameGlobal=new Array();
      
      $("select[name=projectNameSelect] option").each(function(){
         projectNameGlobal.push($(this).text())
         //alert($(this).text())
          
      });
      //利用jqueryaotocomplete完成input输入字符与下来框的值匹配
      $("input[name='username']").autocomplete(projectNameGlobal,{width:104,matchContains: true});
      
}

//下拉框变化时候把选择的option更新到input框里。

function onChange(object){
      var ss=object.options[object.options.selectedIndex].value;
      $("input[name='username']").val(ss);
}

（6）引入jqueryaotocomplete

    <link href="js/plugins/jquery-autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
    <script src="js/plugins/jquery-autocomplete/jquery.autocomplete.js" type="text/javascript"></script>

（7）后台查询

request.setAttribute("userList", queryDetail);

这个queryDetail就是要显示到下拉框中的pojo。