javascript - 如何使用 Select 2 js 找到确切的单词?

标签 javascript jquery ajax cakephp jquery-select2

enter image description here我在我的项目 cakephp 中集成了 select2.js

Js文件代码:

 $(document).ready(function()
{ 
  $('#RecipeIngredientId').select2().change();
    $('#RecipeIngredientId').on('change', function()
    {
      var ingred_val = $(this).val();
       $('#RecipeIngredientId').select2({
                ajax: {
                url: "<?php echo $this->webroot; ?>adminarea/recipe/ingredshow"+ '/' + ingred_val ,
                dataType: 'json',
                type: "GET",
                data: function (term) {
                    return {
                        term: term
                    };
                },
               processResults: function (data) { 
                    return {
                        results: $.map(data, function (item) {
                            return {
                                text: item.title,
                                id: item.id
                            }
                        })
                    };
              }
            }
        })
    })
  });

我们已经在下拉列表中集成了 select 2 box js,但是我们没有得到正确的输出

我们得到的输出

从下拉列表中搜索胡萝卜时 ->

[0]=> baby carrot 1=> baby orange carrot [2]=> baby purple carrot [3]=> carrot

我想这样显示:胡萝卜将是第一个

[0]=> carrot 1=> carrot clean [2]=> baby carrot [3]=> baby purple carrot

(胡萝卜)文本优先级优先

我们已经用过的插件:

  1. 分类器
  2. 匹配器
  3. 处理结果

更新文件

$(document).ready(function(){
$('#RecipeIngredientId').on('change', function()
    {
      var ingred_val = $(this).val();
       $('#RecipeIngredientId').select2({
               processResults: function (data) {
                    var order = [];
                    $.each(data, function(k,v){
                    if(v.title.indexOf(ingred_val) in order){
                     order[v.title.indexOf(ingred_val)+1] = v.title;
                    } else {
                     order[v.title.indexOf(ingred_val)] = v.title; 
                    }
                    }); 
                    data = order.clean(undefined); //remove undefined indexes from array
                    return {
                        results: $.map(data, function (item) {
                            return {
                                text: item.title,
                                id: item.id
                            }
                        })
                    };
              }
        })
    });

       Array.prototype.clean = function(deleteValue) {
          for (var i = 0; i < this.length; i++) {
            if (this[i] == deleteValue) {         
              this.splice(i, 1);
              i--;
            }
          }
          return this;
        };
        $('#RecipeIngredientId').select2().change();
});

最佳答案

你可以使用这个脚本。

processResults: function (data) {
                    var order = [];
                    $.each(data, function(k,v){
                    if(v.indexOf("carrot") in order){
                     order[v.indexOf("carrot")+1] = v;
                    } else {
                     order[v.indexOf("carrot")] = v; 
                    }
                    }); 
                    data = order.clean(undefined); //remove undefined indexes from array
                    return {
                        results: $.map(data, function (item) {
                            return {
                                text: item.title,
                                id: item.id
                            }
                        })
                    };
              }


Array.prototype.clean = function(deleteValue) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] == deleteValue) {         
      this.splice(i, 1);
      i--;
    }
  }
  return this;
};

因此,首先您可以通过遍历它们来检查数据值中单词“carrot”的出现索引。为此,我们正在使用 indexOf。之后,您将获得一个以最少出现索引作为下键的排序数组。现在我们需要从生成的数组中删除未定义的值。因此,为此我使用了一个名为“clean”的函数(不要忘记在你的 JS 中添加这个函数)。你将得到排序后的数组。

这是一个Fiddle.

更新

动态输入值

processResults: function (data) {
                        var order = [];
                        $.each(data, function(k,v){
                        if(v.indexOf("carrot") in order){
                         order[v.indexOf("carrot")+1] = v;
                        } else {
                         order[v.indexOf("+ingred_val+")] = v; 
                        }
                        }); 
                        data = order.clean(undefined); //remove undefined indexes from array
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    text: item.title,
                                    id: item.id
                                }
                            })
                        };
                  }


    Array.prototype.clean = function(deleteValue) {
      for (var i = 0; i < this.length; i++) {
        if (this[i] == deleteValue) {         
          this.splice(i, 1);
          i--;
        }
      }
      return this;
    };

只需将“carrot”替换为已设置选择框值的变量 ingred_val

更新2

processResults: function (data) {
                        var order = [];
                        $.each(data, function(k,v){
                        if(v.title.indexOf("carrot") in order){
                         order[v.title.indexOf("carrot")+1] = v.title;
                        } else {
                         order[v.title.indexOf("+ingred_val+")] = v.title; 
                        }
                        }); 
                        data = order.clean(undefined); //remove undefined indexes from array
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    text: item.title,
                                    id: item.id
                                }
                            })
                        };
                  }


    Array.prototype.clean = function(deleteValue) {
      for (var i = 0; i < this.length; i++) {
        if (this[i] == deleteValue) {         
          this.splice(i, 1);
          i--;
        }
      }
      return this;
    };

更新3

$(document).ready(function(){
$('#RecipeIngredientId').on('change', function()
    {
      var ingred_val = $(this).val();
       $('#RecipeIngredientId').select2({
              $('#RecipeIngredientId').select2().change();
               processResults: function (data) {
                    var order = [];
                    $.each(data, function(k,v){
                    if(v.title.indexOf(ingred_val) in order){
                     order[v.title.indexOf(ingred_val)+1] = v.title;
                    } else {
                     order[v.title.indexOf(ingred_val)] = v.title; 
                    }
                    }); 
                    data = order.clean(undefined); //remove undefined indexes from array
                    return {
                        results: $.map(data, function (item) {
                            return {
                                text: item.title,
                                id: item.id
                            }
                        })
                    };
              }
        })
    });


       Array.prototype.clean = function(deleteValue) {
          for (var i = 0; i < this.length; i++) {
            if (this[i] == deleteValue) {         
              this.splice(i, 1);
              i--;
            }
          }
          return this;
        };

});

关于javascript - 如何使用 Select 2 js 找到确切的单词?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49490981/

相关文章:

javascript - 在 `.ajax`之外定义一个json解析函数

javascript - 函数根据 setinterval 循环但具有不同的参数

javascript - HttpPostedFileBase 每次都返回 null

javascript - 具有基于参数的动态字段的 GraphQL ObjectType

javascript - Zepto.js 中的 Dom 异常 12

javascript - 限制字符串大小正则表达式

javascript - 使用一个javascript脚本动态修改另一个脚本

javascript - 使用 jquery 显示更新

javascript - 使用 Pixi.js 的里程表动画

jquery - 如果我使用 "getElementById"更改单个对象的 CSS 样式,我如何更改继承该样式的所有元素?