如何使用Select 2 js找到Exact单词?

时间:2018-03-26 12:01:23

标签: 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,但是我们没有得到正确的输出

输出我们正在

从下拉菜单中搜索胡萝卜时 - &gt;

  

[0] =&GT;婴儿胡萝卜1 =&gt;宝贝橙色胡萝卜[2] =&gt;宝贝紫色胡萝卜   [3] =&GT;胡萝卜

我想这样表现:胡萝卜将是第一个

  

[0] =&GT;胡萝卜1 =&gt;胡萝卜干净[2] =&gt;宝宝胡萝卜   [3] =&GT;宝贝紫萝卜

(胡萝卜)文本优先级

我们已经使用的插件: 分拣机 匹配 3. processResult

请帮我解决这个问题。提前致谢

更新文件

$(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();
});

1 个答案:

答案 0 :(得分:1)

您可以使用此脚本。

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

首先,您可以通过循环检查数据值中的“胡萝卜”一词来检查事件索引。我们正在使用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;
    };

只需将变量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;
        };

});