欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

下拉框带搜索功能

程序员文章站 2022-05-07 22:58:46
...

适合于下拉框数据量大影响客户体验
均为前端代码，可使用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>

下拉框带搜索功能

相关标签： select

上一篇： 基于select模型的server

下一篇： 检索数据——mysql必知必会（一）

推荐阅读