gpt4 book ai didi

JQuery 自动完成显示所有项目,键入时不会过滤

转载 作者:行者123 更新时间:2023-12-01 07:38:58 25 4
gpt4 key购买 nike

我在我的网络应用程序上使用 JQuery UI 自动完成插件。我能够使其工作,但问题是,每当我在文本框中键入内容时,都会显示数组中的所有项目。我想要做的是无论我在文本框中输入什么,我都想在键入时获得所有匹配的项目。

这是我的代码

var products= [
{"id":1,"value":"VITA.E D-ALPHA 400 UI X 30S","code":"00019","barcode":null,"case_cost":"168.00","pack_cost":"168.00","piece_cost":"5.60"},
{"id":2,"value":"NATTOKIN 1000MG SOFTGELX6S","code":"0005","barcode":null,"case_cost":"0.00","pack_cost":"0.00","piece_cost":"0.00"},
{"id":3,"value":"LIVERMARIN PLUS 1000MGX6S","code":"0006","barcode":null,"case_cost":"0.00","pack_cost":"0.00","piece_cost":"0.00"},
{"id":4,"value":"LIVERMARIN PLUS X30S","code":"00063","barcode":null,"case_cost":"528.00","pack_cost":"528.00","piece_cost":"17.60"},
{"id":5,"value":"NATTOKIN X 30S","code":"00065","barcode":null,"case_cost":"840.00","pack_cost":"840.00","piece_cost":"28.00"},
{"id":6,"value":"OMEGAMAX 12X30S","code":"00067","barcode":null,"case_cost":"5472.00","pack_cost":"456.00","piece_cost":"15.20"}
];


$('#product_code').autocomplete({
minLength:2,
source : function(req,res){
res($.map(products, function(item){
return{
id: item.id,
value : item.code,
label : item.value,
description : item.value,
case_cost : item.case_cost,
piece_cost : item.piece_cost,
pack_cost : item.pack_cost
}
}))
},
select : function(ev,ui){
//some codes here
},

}).focus(function() {
$(this).autocomplete("search", $(this).val());
});

最佳答案

过滤source callback中的数组,其中使用Array#filter方法进行过滤,并使用String#includes检查字符串是否包含搜索词。

var products= [              {"id":1,"value":"VITA.E D-ALPHA 400 UI X 30S","code":"00019","barcode":null,"case_cost":"168.00","pack_cost":"168.00","piece_cost":"5.60"},              {"id":2,"value":"NATTOKIN 1000MG SOFTGELX6S","code":"0005","barcode":null,"case_cost":"0.00","pack_cost":"0.00","piece_cost":"0.00"},              {"id":3,"value":"LIVERMARIN PLUS 1000MGX6S","code":"0006","barcode":null,"case_cost":"0.00","pack_cost":"0.00","piece_cost":"0.00"},              {"id":4,"value":"LIVERMARIN PLUS X30S","code":"00063","barcode":null,"case_cost":"528.00","pack_cost":"528.00","piece_cost":"17.60"},              {"id":5,"value":"NATTOKIN X 30S","code":"00065","barcode":null,"case_cost":"840.00","pack_cost":"840.00","piece_cost":"28.00"},              {"id":6,"value":"OMEGAMAX 12X30S","code":"00067","barcode":null,"case_cost":"5472.00","pack_cost":"456.00","piece_cost":"15.20"}             ];


$('#product_code').autocomplete({
minLength: 2,
source: function(req, res) {
res($.map(products.filter(o => o.value.toLowerCase().includes(req.term.toLowerCase())), function(item) {
return {
id: item.id,
value: item.code,
label: item.value,
description: item.value,
case_cost: item.case_cost,
piece_cost: item.piece_cost,
pack_cost: item.pack_cost
}
}))
},
select: function(ev, ui) {
//some codes here
},

}).focus(function() {
$(this).autocomplete("search", $(this).val());
});
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>

<input id="product_code">

<小时/>

使用 ES6 Destructuring assignmentArray#map 方法。

var products= [              {"id":1,"value":"VITA.E D-ALPHA 400 UI X 30S","code":"00019","barcode":null,"case_cost":"168.00","pack_cost":"168.00","piece_cost":"5.60"},              {"id":2,"value":"NATTOKIN 1000MG SOFTGELX6S","code":"0005","barcode":null,"case_cost":"0.00","pack_cost":"0.00","piece_cost":"0.00"},              {"id":3,"value":"LIVERMARIN PLUS 1000MGX6S","code":"0006","barcode":null,"case_cost":"0.00","pack_cost":"0.00","piece_cost":"0.00"},              {"id":4,"value":"LIVERMARIN PLUS X30S","code":"00063","barcode":null,"case_cost":"528.00","pack_cost":"528.00","piece_cost":"17.60"},              {"id":5,"value":"NATTOKIN X 30S","code":"00065","barcode":null,"case_cost":"840.00","pack_cost":"840.00","piece_cost":"28.00"},              {"id":6,"value":"OMEGAMAX 12X30S","code":"00067","barcode":null,"case_cost":"5472.00","pack_cost":"456.00","piece_cost":"15.20"}             ];



$('#product_code').autocomplete({
minLength: 2,
source: function(req, res) {
res(products.filter(o => o.value.toLowerCase().includes(req.term.toLowerCase()))
.map(({
id,
code,
value,
case_cost,
piece_cost,
pack_cost
}) => ({
id,
value: code,
label: value,
description: value,
case_cost,
piece_cost,
pack_cost
})))
},
select: function(ev, ui) {
//some codes here
},

}).focus(function() {
$(this).autocomplete("search", $(this).val());
});
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>

<input id="product_code">

关于JQuery 自动完成显示所有项目,键入时不会过滤,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55538833/

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