使用bootstrap-suggest模糊搜索下拉调用天眼查接口

因为基于H3 BPM的流程表单做模糊搜索下拉,自带的模糊下拉不能满足需求,于是引用

<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/bootstrap-suggest.js"></script>

 要注意引用的先后顺序,jQuery要再最上面(弱智的问题,但还是踩坑了)

参考:http://lzw.me/pages/demo/bootstrap-suggest-plugin/demo/

           https://www.cnblogs.com/abc8023/p/4817615.html

C#后台代码调用天眼查接口:

   public JsonResult GetTYCSearch(string kehuName)
    {
        AjaxResult ajax = new AjaxResult();
        var token = "这里是购买天眼查接口后的TOKENID";
        string url = "http://open.api.tianyancha.com/services/open/search/2.0?word=" + kehuName + "&pageSize=20&pageNum=1";
        HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);
        WebHeaderCollection headers = new WebHeaderCollection();
        headers.Add("Authorization", token);
        request.UserAgent = null;
        request.Headers = headers;
        request.Method = "GET";
        HttpWebResponse response = (HttpWebResponse)request.GetResponse();
        var httpStatusCode = (int)response.StatusCode;
        Console.WriteLine("返回码为 {0}", httpStatusCode);
        if (httpStatusCode == 200)
        {
            Stream myResponseStream = response.GetResponseStream();
            StreamReader myStreamReader = new StreamReader(myResponseStream, Encoding.GetEncoding("utf-8"));
            string retString = myStreamReader.ReadToEnd();
            myStreamReader.Close();
            myResponseStream.Close();
            ajax.msg = retString;

//这次踩过一次坑,序列化接口返回的json,字段太多了,导致报错 提示算数运算导致溢出,减少public class Items{}中的字段数量
            TYCSearchModel resultModel = Newtonsoft.Json.JsonConvert.DeserializeObject<TYCSearchModel>(retString);
            if (resultModel.error_code != 0)
            {
                ajax.code = -1;
                ajax.msg = resultModel.reason;               
              return Json(ajax);
            }
            return Json(resultModel, JsonRequestBehavior.AllowGet);
        }
        else
        {   
            Console.WriteLine("未返回数据 {0}", httpStatusCode);
            throw new Exception("no data response");
        }

    }
    //根据接口返回的json,用工具自动生成c#类,格式要与json格式一致
    public class TYCSearchModel
    {
        /// <summary>
        /// 
        /// </summary>
        public Result result { get; set; }
        /// <summary>
        /// 
        /// </summary>
        public string reason { get; set; }
        /// <summary>
        /// 
        /// </summary>
        public int error_code { get; set; }
    }
    public class Result
    {
        /// <summary>
        /// 
        /// </summary>
        public int total { get; set; }
        /// <summary>
        /// 
        /// </summary>
        public Items[] items { get; set; }
    }
   public class Items
   {
        /// <summary>
        /// 
        /// </summary>
        public string regStatus { get; set; }
        /// <summary>
        /// 
        /// </summary>
        public string name { get; set; }
   }

前台代码:

<div id="control17" class="col-md-4">
      <div id="control3" class="col-md-3" style="width: 240px;">
           <input type="text" class="form-control search_ul" id="testNoBtn" style="width: 480px;">
              <div class="input-group-btn">
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                  <span class="caret"></span>
                   </button>
              <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
              </div>
      </div>
</div>
///
<script>
$(function () {
   var panmt = $("#testNoBtn").val();
      $("#testNoBtn").bsSuggest({
       emptyTip: '未检索到匹配的数据',
       allowNoKeyword: false,   //是否允许无关键字时请求数据。为 false 则无输入时不执行过滤请求
       multiWord: true,         //以分隔符号分割的多关键字支持
       separator: ",",          //多关键字支持时的分隔符,默认为空格               
       url: "/Portal/Crm_KeHu/GetTYCSearch?kehuName=" + panmt,//优先从url ajax 请求 json 帮助数据,注意最后一个参数为关键字请求参数
       getDataMethod: "url",    //获取数据的方式,总是从 URL 获取
       effectiveFields: ["name", "regStatus"],
       effectiveFieldsAlias: { "name": "客户名称", "regStatus": "经营状态" },    //字段别名,title显示
       ignorecase: true,
       showHeader: true,
       showBtn: false,     //不显示下拉按钮
       delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时,延迟到有输入/获取到焦点时才请求数据
       clearable: true,
       fnProcessData: function (json) {
            var index, len, data = { value: [] };
            if (!json || !json.result || !json.result.items.length) {
                   return false;
               }
            len = json.result.items.length;
         for (i = 0; i < len; i++) {
                 data.value.push({
                      "name": json.result.items[i].name,
                       "regStatus": json.result.items[i].regStatus,
                            });
                        }
                        return data;
                    }
                }).on('onDataRequestSuccess', function (e, result) {
                    console.log(result);
                }).on('onSetSelectValue', function (e, keyword, data) {
                    console.log(keyword, data);
                }).on('onUnsetSelectValue', function () {
                    console.log("onUnsetSelectValue");
                });
            })
            //版本切换
            $('#bsVersion button').on('click', function () {
                var ver = $(this).data('version');
                var cdnSite = '//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/';
                // var cdnSite = '//stackpath.bootstrapcdn.com/bootstrap/';
                $('#bscss').attr('href', cdnSite + ver + '/css/bootstrap.min.css');
                $('#bsjs').attr('src', cdnSite + ver + '/js/bootstrap.min.js');
            });
        </script>

后台返回的json格式要像这样不容易出错,Demo JS返回的json格式

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值