Создайте текстовое поле Alpacajs с Typeahead, которое показывает значение и обрабатывает идентификаторы (внешний ключ) - PullRequest
0 голосов
/ 08 июня 2018

У меня возникли проблемы при создании текстового поля с заголовком внешнего ключа с помощью alpacajs.Цель состоит в том, чтобы иметь один список пар данных (в реальном> 2000) и большой массив (в реальном> 200).Я начинаю использовать поле выбора с атрибутом dataSource, и оно работает для небольших наборов данных, но не для больших массивов.

var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str.text)) {
        matches.push(str);
      }
    });

    cb(matches);
  };
};

var data = [{
    value: 1,
    text: 'Alabama'
  },
  {
    value: 2,
    text: 'Alaska'
  },
  {
    value: 3,
    text: 'Arizona'
  },
  {
    value: 4,
    text: 'Arkansas'
  },
  {
    value: 5,
    text: 'California'
  },
  {
    value: 6,
    text: 'Colorado'
  },
  {
    value: 7,
    text: 'Connecticut'
  },
  {
    value: 8,
    text: 'Delaware'
  },
  {
    value: 9,
    text: 'Florida'
  },
  {
    value: 10,
    text: 'Georgia'
  },
  {
    value: 11,
    text: 'Hawaii'
  },
  {
    value: 12,
    text: 'Idaho'
  },
  {
    value: 13,
    text: 'Illinois'
  },
  {
    value: 14,
    text: 'Indiana'
  },
  {
    value: 15,
    text: 'Iowa'
  },
  {
    value: 16,
    text: 'Kansas'
  },
  {
    value: 17,
    text: 'Kentucky'
  },
  {
    value: 18,
    text: 'Louisiana'
  },
  {
    value: 19,
    text: 'Maine'
  },
  {
    value: 20,
    text: 'Maryland'
  },
  {
    value: 21,
    text: 'Massachusetts'
  },
  {
    value: 22,
    text: 'Michigan'
  },
  {
    value: 23,
    text: 'Minnesota'
  },
  {
    value: 24,
    text: 'Mississippi'
  },
  {
    value: 25,
    text: 'Missouri'
  },
  {
    value: 26,
    text: 'Montana'
  },
  {
    value: 27,
    text: 'Nebraska'
  },
  {
    value: 28,
    text: 'Nevada'
  },
  {
    value: 29,
    text: 'New Hampshire'
  },
  {
    value: 30,
    text: 'New Jersey'
  },
  {
    value: 31,
    text: 'New Mexico'
  },
  {
    value: 32,
    text: 'New York'
  },
  {
    value: 33,
    text: 'North Carolina'
  },
  {
    value: 34,
    text: 'North Dakota'
  },
  {
    value: 35,
    text: 'Ohio'
  },
  {
    value: 36,
    text: 'Oklahoma'
  },
  {
    value: 37,
    text: 'Oregon'
  },
  {
    value: 38,
    text: 'Pennsylvania'
  },
  {
    value: 39,
    text: 'Rhode Island'
  },
  {
    value: 40,
    text: 'South Carolina'
  },
  {
    value: 41,
    text: 'South Dakota'
  },
  {
    value: 42,
    text: 'Tennessee'
  },
  {
    value: 43,
    text: 'Texas'
  },
  {
    value: 44,
    text: 'Utah'
  },
  {
    value: 45,
    text: 'Vermont'
  },
  {
    value: 46,
    text: 'Virginia'
  },
  {
    value: 47,
    text: 'Washington'
  },
  {
    value: 48,
    text: 'West Virginia'
  },
  {
    value: 49,
    text: 'Wisconsin'
  },
  {
    value: 50,
    text: 'Wyoming'
  }
];

$(document).ready(function() {
  $("#alpaca-form").alpaca({
    "data": {
      // the data also contains the value (id) as startup
      "mainState": "Maine",
      "states": ["Washington", "Delaware"]
    },

    "schema": {
      "type": "object",
      "properties": {
        "mainState": {
          "type": "string"
        },
        "states": {
          "type": "array",
          "items": {
            "type": "string"
          }
        }
      }
    },

    "options": {
      "fields": {
        "mainState": {
          "type": "text",
          "placeholder": "Select State",
          "typeahead": {
            "config": {
              "autoselect": true,
              "highlight": true,
              "updater": true,
              "hint": true,
              "minLength": 1
            },
            "datasets": {
              "limit": 10,
              "displayKey": "text",
              "source": substringMatcher(data)
            }
          }
        },
        "states": {
          "label": "List of States",
          "type": "array",
          "toolbarSticky": true,
          "actionbarStyle": "right",
          "items": {
            "type": "text",
            "placeholder": "Select State",
            "typeahead": {
              "config": {
                "autoselect": true,
                "highlight": true,
                "hint": true,
                "minLength": 1
              },
              "datasets": {
                "limit": 10,
                "displayKey": "text",
                "source": substringMatcher(data)

              }
            }
          }
        }
      },
      "form": {
        "attributes": {
          "action": "#",
          "method": "POST"
        },
        "buttons": {
          "validate": {
            "title": "Show JSON",
            "click": function() {
              this.refreshValidationState(true);
              if (this.isValid(true)) {
                swal("Valid value", JSON.stringify(this.getValue(), null, "  "), "info");
              }
            }
          }
        }

      }
    }
  })
})
@import url("https://cdnjs.cloudflare.com/ajax/libs/typeahead.js-bootstrap-css/1.2.1/typeaheadjs.min.css")
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

.array-field .alpaca-field .pull-left {
  width: 60%;
}

.alpaca-container-item .pull-left {
  width: 60%
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.1/handlebars.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js"></script>
<div class="container mt-2">
  <div class="row">
    <div class="col-md-12">
      <div id="alpaca-form"></div>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 28 июня 2018

Я добавил дубликатор списка, который, по-моему, не сильно влияет на производительность.

Я понимаю, что это не настоящий ответ, поэтому я рад удалить его позже.

var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str.text)) {
        matches.push(str);
      }
    });

    cb(matches);
  };
};

var data = [{
    value: 1,
    text: 'Alabama'
  },
  {
    value: 2,
    text: 'Alaska'
  },
  {
    value: 3,
    text: 'Arizona'
  },
  {
    value: 4,
    text: 'Arkansas'
  },
  {
    value: 5,
    text: 'California'
  },
  {
    value: 6,
    text: 'Colorado'
  },
  {
    value: 7,
    text: 'Connecticut'
  },
  {
    value: 8,
    text: 'Delaware'
  },
  {
    value: 9,
    text: 'Florida'
  },
  {
    value: 10,
    text: 'Georgia'
  },
  {
    value: 11,
    text: 'Hawaii'
  },
  {
    value: 12,
    text: 'Idaho'
  },
  {
    value: 13,
    text: 'Illinois'
  },
  {
    value: 14,
    text: 'Indiana'
  },
  {
    value: 15,
    text: 'Iowa'
  },
  {
    value: 16,
    text: 'Kansas'
  },
  {
    value: 17,
    text: 'Kentucky'
  },
  {
    value: 18,
    text: 'Louisiana'
  },
  {
    value: 19,
    text: 'Maine'
  },
  {
    value: 20,
    text: 'Maryland'
  },
  {
    value: 21,
    text: 'Massachusetts'
  },
  {
    value: 22,
    text: 'Michigan'
  },
  {
    value: 23,
    text: 'Minnesota'
  },
  {
    value: 24,
    text: 'Mississippi'
  },
  {
    value: 25,
    text: 'Missouri'
  },
  {
    value: 26,
    text: 'Montana'
  },
  {
    value: 27,
    text: 'Nebraska'
  },
  {
    value: 28,
    text: 'Nevada'
  },
  {
    value: 29,
    text: 'New Hampshire'
  },
  {
    value: 30,
    text: 'New Jersey'
  },
  {
    value: 31,
    text: 'New Mexico'
  },
  {
    value: 32,
    text: 'New York'
  },
  {
    value: 33,
    text: 'North Carolina'
  },
  {
    value: 34,
    text: 'North Dakota'
  },
  {
    value: 35,
    text: 'Ohio'
  },
  {
    value: 36,
    text: 'Oklahoma'
  },
  {
    value: 37,
    text: 'Oregon'
  },
  {
    value: 38,
    text: 'Pennsylvania'
  },
  {
    value: 39,
    text: 'Rhode Island'
  },
  {
    value: 40,
    text: 'South Carolina'
  },
  {
    value: 41,
    text: 'South Dakota'
  },
  {
    value: 42,
    text: 'Tennessee'
  },
  {
    value: 43,
    text: 'Texas'
  },
  {
    value: 44,
    text: 'Utah'
  },
  {
    value: 45,
    text: 'Vermont'
  },
  {
    value: 46,
    text: 'Virginia'
  },
  {
    value: 47,
    text: 'Washington'
  },
  {
    value: 48,
    text: 'West Virginia'
  },
  {
    value: 49,
    text: 'Wisconsin'
  },
  {
    value: 50,
    text: 'Wyoming'
  }
];

function makeDups(data) {
    var dups = [];
    var delta = data.length;
    data.forEach(function(v,i,a){
        dups.push({
            value: i + delta,
            text: v.text + ' ' + (i + delta)
        });
    });
    return dups;
}

for(var i= 0; i< 7;i++) {
    data = data.concat(data, makeDups(data));
    //alert( 'data size: ' + data.length);
}
alert( 'data size: ' + data.length);

$(document).ready(function() {
  $("#alpaca-form").alpaca({
    "data": {
      // the data also contains the value (id) as startup
      "mainState": "Maine",
      "states": ["Washington", "Delaware"]
    },

    "schema": {
      "type": "object",
      "properties": {
        "mainState": {
          "type": "string"
        },
        "states": {
          "type": "array",
          "items": {
            "type": "string"
          }
        }
      }
    },

    "options": {
      "fields": {
        "mainState": {
          "type": "text",
          "placeholder": "Select State",
          "typeahead": {
            "config": {
              "autoselect": true,
              "highlight": true,
              "updater": true,
              "hint": true,
              "minLength": 1
            },
            "datasets": {
              "limit": 10,
              "displayKey": "text",
              "source": substringMatcher(data)
            }
          }
        },
        "states": {
          "label": "List of States",
          "type": "array",
          "toolbarSticky": true,
          "actionbarStyle": "right",
          "items": {
            "type": "text",
            "placeholder": "Select State",
            "typeahead": {
              "config": {
                "autoselect": true,
                "highlight": true,
                "hint": true,
                "minLength": 1
              },
              "datasets": {
                "limit": 10,
                "displayKey": "text",
                "source": substringMatcher(data)

              }
            }
          }
        }
      },
      "form": {
        "attributes": {
          "action": "#",
          "method": "POST"
        },
        "buttons": {
          "validate": {
            "title": "Show JSON",
            "click": function() {
              this.refreshValidationState(true);
              if (this.isValid(true)) {
                swal("Valid value", JSON.stringify(this.getValue(), null, "  "), "info");
              }
            }
          }
        }

      }
    }
  })
})
@import url("https://cdnjs.cloudflare.com/ajax/libs/typeahead.js-bootstrap-css/1.2.1/typeaheadjs.min.css")
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

.array-field .alpaca-field .pull-left {
  width: 60%;
}

.alpaca-container-item .pull-left {
  width: 60%
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.1/handlebars.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.cloudcms.com/alpaca/1.5.24/bootstrap/alpaca.min.js"></script>
<div class="container mt-2">
  <div class="row">
    <div class="col-md-12">
      <div id="alpaca-form"></div>
    </div>
  </div>
</div>
...