因为基于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格式