如何根据来自 JSON 数据源的搜索为文本框提供建议
Posted
技术标签:
【中文标题】如何根据来自 JSON 数据源的搜索为文本框提供建议【英文标题】：How can I give the suggestion for a textbox based on search from JSON datasource 【发布时间】：2019-10-14 18:06:27 【问题描述】：我有一个类似这样的数据源。
0: id: 12, productNumber: "FGC 101 89/1A380", rstate: "R1B", functionDesignation: "J-*** 1.0 WIND",…
acronym: "***"
code: null
functionDesignation: "J-*** 1.0 WIND"
id: 12
prCode: null
productNumber: "FGC 101 89/1A380"
reCode: "DS4"
rstate: "R1B"
versionDesignationText: ""
1: id: 13, productNumber: "FGC 101 89/1A380", rstate: "R1A", functionDesignation: "J-*** 1.0 WIND",…
acronym: "***"
code: null
functionDesignation: "J-*** 1.0 WIND"
id: 13
prCode: null
productNumber: "FGC 101 89/1A380"
reCode: "DS4"
rstate: "R1A"
versionDesignationText: ""
我也有一个像下面这样的文本框。
<div class="col-md-3 col-sm-3 col-xs-3">
<label class="control-label">Product Name</label>
<input type="text" class="form-control" id="emsProductName" />
</div>现在当用户输入首字母缩写词（***）或功能名称（J-*** 1.0 WIND）时，我如何显示匹配的前四列的建议。
我已经通过以下方式完成了
$("#emsProductName").autocomplete(
source: function (request, response)
console.log(request.term);
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
$.ajax(
type : 'POST',
url : config.vnfURL + 'vnf/getPRIM',
dataType: "json",
contentType: "application/json; charset=utf-8",
data:
q: request.term
,
success: function (data)
console.log(response);
response($.map(data, function(v,i)
var text = v.acronym;
if ( text && ( !request.term || matcher.test(text) ) )
return
label: v.acronym+"_"+v.productNumber+"_"+v.functionDesignation+"_"+v.rstate+ "_" +v.versionDesignationText,
value: v.productNumber+"_"+v.functionDesignation+"_"+v.rstate+ "_" +v.versionDesignationText
;
));
);
); 它工作得很好，但完整的值保存在 emsProductName 文本框中。
如何拆分值并仅将 functionDesignation 放在 emsProductName(textbox) 中，将 rstate 放在 Rstate(textbox) 中，prodcutNumber 分别放在 prodcutNumber 文本框中。
【问题讨论】：
【参考方案1】：以下是自动完成的示例代码，但您需要根据需要进行转换。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Custom data and display</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#project-label
display: block;
font-weight: bold;
margin-bottom: 1em;
#project-icon
float: left;
height: 32px;
width: 32px;
#project-description
margin: 0;
padding: 0;
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function()
var projects = [
functiondesignation: "ericson software",
accrname: "SDI",
rstate: "R10A",
productnumber: "FGC 101 2997"
,
functiondesignation: "ericson software",
accrname: "SDI",
rstate: "R9A",
productnumber: "FGC 101 2997"
,
functiondesignation: "ericson software",
accrname: "SDI",
rstate: "R9A",
productnumber: "FGC 101 2997"
,
accrname: "SDN",
functiondesignation: "ericson software",
rstate: "R3A",
productnumber: "FGC 101 3031/6"
];
$( "#project" ).autocomplete(
minLength: 1,
source: projects,
focus: function( event, ui )
$( "#project" ).val( ui.item.accrname );
return false;
,
select: function( event, ui )
$( "#project" ).val( ui.item.functiondesignation );
$( "#project-description" ).html( ui.item.accrname +ui.item.rstate + ui.item.productnumber );
return false;
)
.autocomplete( "instance" )._renderItem = function( ul, item )
return $( "<li>" )
.append( "<div>" + item.accrname + item.rstate + item.productnumber+ "</div>")
.appendTo( ul );
;
);
</script>
</head>
<body>
<input id="project">
<input type="hidden" id="project-id">
<p id="project-description"></p>
</body>
</html>【讨论】：
以上是关于如何根据来自 JSON 数据源的搜索为文本框提供建议的主要内容，如果未能解决你的问题，请参考以下文章