gpt4 book ai didi

javascript - 搜索输入字段以搜索 JSON 数据

转载 作者:行者123 更新时间:2023-11-28 00:36:39 25 4
gpt4 key购买 nike

我有一个根据用户需求生成的对象数组。

我想做的是:-

  1. 我有一个对象数组,我存储在一个变量中并有一个输入字段
  2. 输入字段是类型搜索,所以在我的对象数组中,键是 ItemNameBatchCodeCasesQtyUnitQtyPurRateDisc% 我将 ItemName 作为搜索参数
  3. 现在,每当用户关注输入字段时,我正在做的事情是我正在搜索关于 ItemName 的数据,但不知何故,我无法创建我必须创建的内容
  4. 我想创建类似 This 的东西

  5. 每当用户在输入字段中输入匹配项时,输入字段中也应该出现

  6. 在我的代码中作为搜索参数出现的下拉菜单不可点击

我的代码

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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com