autocomplete.blade.php 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. <style>
  2. .autocomplete-suggestions { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #999; background: #FFF; cursor: default; overflow: auto; -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); }
  3. .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
  4. .autocomplete-no-suggestion { padding: 2px 5px;}
  5. .autocomplete-selected { background: #F0F0F0; }
  6. .autocomplete-suggestions strong { font-weight: bold; color: #000; }
  7. .autocomplete-group { padding: 2px 5px; font-weight: bold; font-size: 16px; color: #000; display: block; border-bottom: 1px solid #000; }
  8. </style>
  9. @include('admin::form.input')
  10. <script init="{!! $selector !!}" require="@autocomplete">
  11. var configs = {!! $configs !!};
  12. @if(isset($ajax))
  13. configs = $.extend(configs, {
  14. serviceUrl: '{{ $ajax['url'] }}',
  15. groupBy: '{{ $ajax['groupField'] }}',
  16. dataType: 'json',
  17. transformResult: function (response) {
  18. return {
  19. suggestions: (function (data, valueField) {
  20. if (!data) {
  21. return [];
  22. }
  23. if (valueField) {
  24. return $.map(data, function (dat) {
  25. return {value: Dcat.helpers.get(dat, valueField) + '', data: dat};
  26. });
  27. }
  28. return data;
  29. })(response.data, '{{ $ajax['valueField'] }}')
  30. };
  31. }
  32. });
  33. @else
  34. configs = $.extend(configs, {
  35. lookup: {!! $options !!}
  36. });
  37. @endif
  38. @if(isset($depends))
  39. var fields = {!! $depends['fields'] !!};
  40. configs = $.extend(configs, {
  41. 'onSearchStart': function (params) {
  42. var formData = $this.closest('form').serializeArray();
  43. var p = {};
  44. for (var field of fields) {
  45. for (var data of formData) {
  46. if (!data.value.length){
  47. continue;
  48. }
  49. if (data.name === field) {
  50. p[field] = data.value
  51. }
  52. if (data.name === field + '[]') {
  53. if(!Array.isArray(p[field])){
  54. p[field] = []
  55. }
  56. p[field].push(data.value);
  57. }
  58. }
  59. if (!p.hasOwnProperty(field)){
  60. return false;
  61. }
  62. }
  63. params = $.extend(params, p);
  64. }
  65. })
  66. @if($depends['clear'])
  67. $.map(fields, function (field) {
  68. var _selectors = [
  69. '[name="' + field + '"]',
  70. '[name="' + field + '[]"]'
  71. ];
  72. $.map(_selectors, function(_selector){
  73. $this.closest('form').off('change.depends', _selector)
  74. .on('change.depends', _selector, function () {
  75. $this.val('');
  76. });
  77. })
  78. });
  79. @endif
  80. @endif
  81. $this.autocomplete(configs);
  82. </script>