基于H+的搜索自动补全

红太狼 2021-01-24 18:14 425阅读 0赞

组长给了一个任务，去写一个demo，demo的功能是搜索自动补全，所幸给了一个框架的示例，于是就去看着给的说明写了个demo

html+js代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html >
      <head>
        <title>模糊查询</title>
    
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="bootstrap.min.css" />    
      </head>  
    <body > 
    <h3>下拉框示例</h3>         
    <div class="input-group" style="width:240px;">                                                
        <input type="text" class="form-control" id="admdirector" style="width:240px;margin-right:0px">                                            
        <div class="input-group-btn" style="width:1px;">                                                    
            <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
        </div>                                                
    </div>
        <script src="jquery-2.0.3.min.js"></script>
    	<script src="tether.min.js"></script>
        <script src="bootstrap.min.js"></script>
        <script src="bootstrap-suggest.js"></script>            
        <script>
           $("#admdirector").bsSuggest({
                    indexId: 4, //data.value 的第几个数据，作为input输入框的内容
                    indexKey: 0, //data.value 的第几个数据，作为input输入框的内容
                    allowNoKeyword: false, //是否允许无关键字时请求数据
                    multiWord: false, //以分隔符号分割的多关键字支持
                    separator: ",", //多关键字支持时的分隔符，默认为空格
                    getDataMethod: "url", //获取数据的方式，总是从 URL 获取
                    effectiveFields:["chargeMonths","giveDays","price","remarks"],
                    effectiveFieldsAlias:{chargeMonths: "充值月数",giveDays:"赠送天数",price:"价格",remarks:"备注"},
                    showHeader: true,
                    url: 'http://localhost:3101/ChargeRules/queryChargeRules?remarks=', 
                    processData: function(json){                
                        var i, len, data = {value: []};            
                        if(!json || json.obj.length == 0) {
                            return false;
                        }
                        len = json.obj.length;
                        for (i = 0; i < len; i++) {
                            data.value.push({
                                "chargeMonths": json.obj[i].chargeMonths,
                                "giveDays": json.obj[i].giveDays,
                                "price":json.obj[i].price,
                                "remarks":json.obj[i].remarks,
                                "chargeRulesId":json.obj[i].chargeRulesId
                            });
                        }            
                        console.log(data);
                        return data;            
                    }
                }).on("onSetSelectValue",function(event,result){
                    console.log(result);
           });
        </script>
    </body>
      
    </html>

解释一下部分没有注释的地方，有个chargeRulesId不能显示却要用到，这时用到了一个函数 onSetSelectValue,这个函数会在你选中值后把数据返回给result，这里的result里面的值有选中值的index,还有最开始设置的indexId,indexKey

展示一下效果图

![70][]![70 1][]

[70]: /images/1611511875791.png
[70 1]: /images/1611512030829.png