我有一个根据用户需求生成的对象数组。
我想做的是:-
- 我有一个对象数组，我将其存储在变量中并有一个输入字段
- 输入字段是类型搜索，因此在我的对象数组中，键是
ItemName、BatchCode、CasesQty、UnitQty、PurRate和Disc%我将ItemName作为搜索参数 - 现在，每当用户专注于输入字段时，我都会搜索
ItemName的数据，但不知何故，我无法创建我必须创建的内容 我想创建类似
的内容每当用户在输入字段内键入内容时，匹配项也应出现在输入字段内
- 我的代码中作为搜索参数的下拉菜单不可点击
我的代码
var data = [{
"ItemName": "Curd",
"BatchCode": 400231,
"CasesQty": 10,
"UnitQty": 5,
"PurRate": 50,
"Disc%": 6
},
{
"ItemName": "Rice",
"BatchCode": 400123,
"CasesQty": 12,
"UnitQty": 7,
"PurRate": 80,
"Disc%": 10
},
{
"ItemName": "Milk",
"BatchCode": 400156,
"CasesQty": 4,
"UnitQty": 2,
"PurRate": 20,
"Disc%": 2
},
{
"ItemName": "Butter",
"BatchCode": 400564,
"CasesQty": 8,
"UnitQty": 6,
"PurRate": 35,
"Disc%": 4
}
]
$('#searchInput').keyup(function() {
var searchField = $(this).val();
if (searchField === '') {
$('#filter-records').html('');
return;
}
var regex = new RegExp(searchField, "i");
var output = '<div class="row">';
$.each(data, function(key, val) {
if ((val.ItemName.search(regex) != -1)) {
output += '<div">';
output += '<div class="form-group"><a class="dropdown-item">' + val.ItemName + '</a></div>'
}
});
output += '</div>';
$('#filter-records').html(output);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="form-group">
<input type="search" class="form-control" name="searchInput" id="searchInput">
</div>
<div id="filter-records"></div>我认为我使用了错误的方法在新 div 中显示搜索参数，我上传的图像我想做类似的事情
最佳答案
首先从给定对象创建项目名称列表，然后使用自动完成库。我正在使用 jQuery 库进行自动完成。
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</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">
<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 data = [{
"ItemName": "Curd",
"BatchCode": 400231,
"CasesQty": 10,
"UnitQty": 5,
"PurRate": 50,
"Disc%": 6
},
{
"ItemName": "Rice",
"BatchCode": 400123,
"CasesQty": 12,
"UnitQty": 7,
"PurRate": 80,
"Disc%": 10
},
{
"ItemName": "Milk",
"BatchCode": 400156,
"CasesQty": 4,
"UnitQty": 2,
"PurRate": 20,
"Disc%": 2
},
{
"ItemName": "Butter",
"BatchCode": 400564,
"CasesQty": 8,
"UnitQty": 6,
"PurRate": 35,
"Disc%": 4
}
]
let itemName = data.map(value => { return value.ItemName });
$( "#tags" ).autocomplete({
source: itemName
});
} );
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>关于javascript - 搜索输入字段以搜索 JSON 数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55823022/