下拉框带搜索功能

适合于下拉框数据量大影响客户体验
均为前端代码，可使用jQuery版本范围广
先引用jquery ，以及select 插件jquery.searchableSelect.js

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>带搜索框的jQuery下拉框美化插件 searchableSelect</title>
    <link href="jquery.searchableSelect.css" rel="stylesheet" type="text/css">
    <script src="jquery-1.11.1.min.js"></script>
    <script src="jquery.searchableSelect.js"></script>
  </head>
  <body>
    <select id="a">
      <option value="jQuery插件库">jQuery插件库</option>
      <option value="BlackBerry">BlackBerry</option>
      <option value="device">device</option>
      <option value="with">with</option>
      <option value="entertainment">entertainment</option>
      <option value="and">and</option>
      <option value="social">social</option>
      <option value="networking">networking</option>
      <option value="apps">apps</option>
      <option value="or">or</option>
      <option value="apps">apps</option>
      <option value="that">that</option>
      <option value="will">will</option>
      <option value="boost">boost</option>
      <option value="your">your</option>
      <option value="productivity">productivity</option>
      <option value="Download">Download</option>
      <option value="or">or</option>
      <option value="buy">buy</option>
      <option value="apps">apps</option>
      <option value="from">from</option>
      <option value="Afbb">Afbb</option>
      <option value="Akademie">Akademie</option>
      <option value="Berlin">Berlin</option>
      <option value="reviews">reviews</option>
      <option value="by">by</option>
      <option value="real">real</option>
    </select>
    <script>
        $(function(){
            $('#a').searchableSelect();
        });
    </script>
  </body>
</html>

如果项目中jQuery版本在1.8.1以下时需要修改插件

    //jquery 1.8.1以上使用
//  $.expr[":"].searchableSelectContains = $.expr.createPseudo(function(arg) {
//    return function( elem ) {
//      return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
//    };
//  });
  $.expr[":"].searchableSelectContains = function(obj,index,meta){  
         return $(obj).text().toUpperCase().indexOf(meta[3].toUpperCase()) >= 0;
      };

此插件也可适用于ajax动态赋值

ajax动态赋值代码

function initSelectByAction(action, selectObj, displayName, displayValue,
        dataStoreName, parentId) {
    var postData = {};
    $.ajax({
                type : "POST",
                dataType : "json",
                url : action,
                async : false, // 设为false就是同步请求
                data : postData,
                success : function(msg) {
                    if (selectObj && selectObj.options) {
                        selectObj.options.length = 0;
                        selectObj.options.add(new Option("请选择", ""));
                        if (dataStoreName && dataStoreName != "") {
                            if (parentId && parentId != "") {
                                var newStore = "[";
                                for (var i = 0, j = msg.length; i < j; i++) {
                                    if (parentId == msg[i].parentID)
                                        newStore = newStore + '{\"id\":\"'
                                                + msg[i].id
                                                + '\",\"organizationName\":\"'
                                                + msg[i].organizationName
                                                + '\",\"organizationCode\":\"'
                                                + msg[i].organizationCode
                                                + '\"},';
                                }
                                newStore = newStore + "]";
                                msg = eval(newStore)
                                oDataCenter[dataStoreName] = msg;
                            } else {
                                oDataCenter[dataStoreName] = msg;
                            }
                        }
                        var olenk = msg.length;
                        for (var x = 0; x < olenk; x++) {
                            var opObject = new Option(msg[x][displayName],
                                    msg[x][displayValue]);
                            if ($(selectObj).attr('defaultValue')
                                    && $(selectObj).attr('defaultValue') == msg[x][displayValue]) {
                                opObject.selected = true;
                            }
                            selectObj.options.add(opObject);
                        }
                    }
                },
                error : function(msg) {
                    alert("发生网络访问错误，此种情况一般出现在网络不稳定或点击频率过快，请稍后重试！");
                }
            });
    return oDataCenter[dataStoreName];
}

initSelectByTableName(document.getElementById('supplierId'),'MST_SUPPLIER',"NAME",'ID',' 1=1 ORDER BY NAME');

<select  id='supplierId' name='orderRequest.supplierId' style='width: 300px;'
                                defaultValue='${orderRequest.supplierId}' ></select><span class='inputRed'>*</span>

这里写图片描述

下拉框带搜索功能

ajax动态赋值代码

猜你喜欢