使用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格式