search.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. $(function () {
  2. let params = lxd.parseUrl(window.location.href).query,
  3. my_search = $(".my-search>div"), start = 0, end = 0, currentPage = 1, pageSize = 20, totalPage = 1;
  4. my_search.find("select").val(params.selectval);
  5. my_search.find("input").val(params.inputval);
  6. // 数据渲染
  7. function work (data, parameter) {
  8. $(".content>ul>li").remove();
  9. data = data.map(item => {
  10. let reg = new RegExp(`(${parameter})`, "g"), newstr = item.title.replace(reg, `<font color=red>$1</font>`);
  11. let li = document.createElement("li");
  12. li.innerHTML = `<a target="_blank" href="${item.url}">
  13. <h5>${newstr}</h5>
  14. <div class="flex">
  15. <img data-original="${item.thumbnail}"
  16. src="./imgs/app.png" alt=""
  17. class="flex-item">
  18. <div class="flex-item">
  19. <p>${item.status} ${item.area}</p>
  20. <p>${item.time}</p>
  21. </div>
  22. </div>
  23. </a>`;
  24. return li;
  25. })
  26. $(".content>ul").append(data);
  27. $("img").lazyload();
  28. }
  29. // 分页请求
  30. function request (data) {
  31. return new Promise(resolve => {
  32. $.ajax({
  33. method: "get",
  34. data: {
  35. type: data.selectval,
  36. parameter: data.inputval,
  37. currentPage,
  38. pageSize
  39. },
  40. url: "http://admin.gaokaoapp.net/find/search/",
  41. success: function (res) {
  42. let { dataList: datas, totalPage: total, totalResult } = res.data;
  43. totalPage = total;
  44. $(".content>p").html(`为您找到相关结果约${totalResult}个`);
  45. work(datas, data.inputval)
  46. resolve(total);
  47. }
  48. })
  49. })
  50. }
  51. request(params).then(res => problem(res));
  52. // 页面搜索逻辑
  53. function axios () {
  54. let div = $(".my-search>div"), data = { selectval: div.find("select").val(), inputval: div.find("input").val() };
  55. params = { ...data };
  56. request(params).then(res => problem(res));
  57. }
  58. $(".button").click(axios);
  59. // 分页问题 小于5
  60. function problem (res) {
  61. let ul = $(".pagination>li");
  62. if (res <= 5) {
  63. Array.from(ul).forEach((item, index) => {
  64. if (index > res) $(item).addClass("disabled")
  65. })
  66. } else {
  67. Array.from(ul).forEach((item, index) => {
  68. if (index != 0) $(item).removeClass("disabled")
  69. })
  70. }
  71. }
  72. my_search.keydown(function (event) {
  73. if (event.keyCode == 13) axios();
  74. }).find("label").click(axios);
  75. // let lis = $(".pagination>li");
  76. // 分页逻辑
  77. $(".pagination").click(function (e) {
  78. let li = $(e.target).parent();
  79. if (li.hasClass("active") || li.hasClass("disabled")) return false;
  80. $(this).find(".active").removeClass("active");
  81. let val = $(e.target).html(), arr = [];
  82. function operation (num, arr) {
  83. let brr = [];
  84. Array.from(arr).forEach(item => brr.push($(item).html()))
  85. brr = brr.slice(1, -1);
  86. if (num > 0 && Number(brr[4]) < totalPage) {
  87. Array.from(arr).forEach((item, index) => {
  88. $(item).parent().removeClass("disabled");
  89. if (index != 0 && index != 6) {
  90. let html = Number(brr[index - 1]) + num;
  91. if (html > totalPage) {
  92. $(item).html(html).parent().addClass("disabled");
  93. } else {
  94. if (index == 1) {
  95. $(item).html(html).parent().addClass("active");
  96. req(html)
  97. } else {
  98. $(item).html(html);
  99. }
  100. }
  101. }
  102. if (index == 6 && Number(brr[4]) + num > totalPage) {
  103. $(item).parent().addClass("disabled");
  104. }
  105. })
  106. }
  107. if (num < 0 && Number(brr[0]) != 1) {
  108. Array.from(arr).forEach((item, index) => {
  109. $(item).parent().removeClass("disabled");
  110. let html = Number(brr[index - 1]) + num;
  111. if (index != 0 && index != 6) {
  112. if (index == 1) {
  113. $(item).html(html).parent().addClass("active");
  114. req(html)
  115. } else {
  116. $(item).html(html)
  117. }
  118. }
  119. if (index == 0 && Number(brr[0]) + num == 1) {
  120. $(item).parent().addClass("disabled");
  121. }
  122. })
  123. }
  124. }
  125. function req (val) {
  126. currentPage = Number(val);
  127. request(params)
  128. }
  129. switch (val) {
  130. case "»":
  131. arr = li.parent().find("a");
  132. operation(5, arr)
  133. break;
  134. case "«":
  135. arr = li.parent().find("a");
  136. operation(-5, arr)
  137. break;
  138. default:
  139. li.addClass("active");
  140. req(val)
  141. }
  142. })
  143. })