JQuery 自动完成显示所有项目，在输入时不会过滤答案

【问题标题】：JQuery autocomplete displays all items, won't filter while typingJQuery 自动完成显示所有项目，在输入时不会过滤
【发布时间】：2019-04-05 15:28:29
【问题描述】：

我在我的网络应用程序上使用 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());
});

【问题讨论】：

您必须使用 req 来过滤所有可用产品中的产品 matchign rq

标签： jquery autocomplete jquery-ui-autocomplete

【解决方案1】：

在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 assignment 和Array#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">

【讨论】：

@KimCarlo：很高兴它有帮助:)

【解决方案2】：

关注jquery UI Autocomplete documentation

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"}
             ];

例如，您可以使用静态源并让 jquery 处理匹配：

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

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

或者你可以使用更灵活的 callable 作为源：

$('#product_code').autocomplete({
    minLength:2,
    source : function(req,res){
          var search = req.term.toLowerCase();
          res(products.reduce(function(matches, product){
             if ( -1 !== product.code.toLowerCase().indexOf(search) )
                matches.push({value:product.code,label:product.value});
             return matches;
         }, []));
    },
    select : function(ev,ui){
        //some codes here
    },

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

【讨论】：